study/ZiuChen.github.io
1
0
Fork 0
mirror of https://github.com/ZiuChen/ZiuChen.github.io.git synced 2025-08-17 23:19:55 +08:00
Code Issues Packages Projects Releases Wiki Activity
ZiuChen.github.io/article/【快手】深入理解前端面试题.html

362 lines
149 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>【快手】深入理解前端面试题 | ZiuChen</title>
<meta name="description" content="Unlimited Progress.">
<link rel="preload stylesheet" href="/assets/style.ec1c8c15.css" as="style">
<script type="module" src="/assets/app.499ce9ef.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/framework.9b71bc06.js">
<link rel="modulepreload" href="/assets/chunks/theme.35023a02.js">
<link rel="modulepreload" href="/assets/article_【快手】深入理解前端面试题.md.d44b9955.lean.js">
<link rel="icon" href="/logo.png">
<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>
</head>
<body>
<div id="app"><div class="Layout" data-v-9d158fda><!--[--><!--]--><!--[--><span tabindex="-1" data-v-204cb7b1></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-204cb7b1> Skip to content </a><!--]--><!----><header class="VPNav" data-v-9d158fda data-v-8afa7537><div class="VPNavBar has-sidebar" data-v-8afa7537 data-v-56b97c0f><div class="container" data-v-56b97c0f><div class="title" data-v-56b97c0f><div class="VPNavBarTitle has-sidebar" data-v-56b97c0f data-v-5e4abee9><a class="title" href="/" data-v-5e4abee9><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" alt data-v-c46cb0a1><!--]--><!--[-->ZiuChen<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-56b97c0f><div class="curtain" data-v-56b97c0f></div><div class="content-body" data-v-56b97c0f><!--[--><!--]--><div class="VPNavBarSearch search" data-v-56b97c0f><!--[--><!----><div id="docsearch"><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-56b97c0f data-v-471dd2d2><span id="main-nav-aria-label" class="visually-hidden" data-v-471dd2d2>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-471dd2d2 data-v-79f36db3><!--[--><span data-v-79f36db3>首页</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-471dd2d2 data-v-8f17ebbc><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-8f17ebbc><span class="text" data-v-8f17ebbc><!----><span data-v-8f17ebbc>我的项目</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-8f17ebbc><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"></path></svg></span></button><div class="menu" data-v-8f17ebbc><div class="VPMenu" data-v-8f17ebbc data-v-f5acf789><div class="items" data-v-f5acf789><!--[--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/project/ClipboardManager/" data-v-5f1b289c><!--[-->超级剪贴板<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/project/Markdown/" data-v-5f1b289c><!--[-->超级Markdown<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/project/JSRunner/" data-v-5f1b289c><!--[-->超级JavaScript<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/project/SmartWordBreak/" data-v-5f1b289c><!--[-->超级分词<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-471dd2d2 data-v-8f17ebbc><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-8f17ebbc><span class="text" data-v-8f17ebbc><!----><span data-v-8f17ebbc>开源作品</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-8f17ebbc><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"></path></svg></span></button><div class="menu" data-v-8f17ebbc><div class="VPMenu" data-v-8f17ebbc data-v-f5acf789><div class="items" data-v-f5acf789><!--[--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/works/opensource.html" data-v-5f1b289c><!--[-->个人作品<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/works/contribution.html" data-v-5f1b289c><!--[-->社区贡献<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-471dd2d2 data-v-8f17ebbc><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-8f17ebbc><span class="text" data-v-8f17ebbc><!----><span data-v-8f17ebbc>学习笔记</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-8f17ebbc><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"></path></svg></span></button><div class="menu" data-v-8f17ebbc><div class="VPMenu" data-v-8f17ebbc data-v-f5acf789><div class="items" data-v-f5acf789><!--[--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/JavaScript.html" data-v-5f1b289c><!--[-->JavaScript基础<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/CSS.html" data-v-5f1b289c><!--[-->CSS基础<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/JavaScriptEnhanced.html" data-v-5f1b289c><!--[-->JavaScript进阶<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/Front-end%20Engineering.html" data-v-5f1b289c><!--[-->前端工程化<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/SSR.html" data-v-5f1b289c><!--[-->服务端渲染<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/React.html" data-v-5f1b289c><!--[-->React基础<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/React%20Hooks.html" data-v-5f1b289c><!--[-->React Hooks<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/Redux.html" data-v-5f1b289c><!--[-->Redux<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/React%20Router.html" data-v-5f1b289c><!--[-->React Router<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-f5acf789 data-v-5f1b289c><a class="VPLink link" href="/note/MySQL.html" data-v-5f1b289c><!--[-->MySQL<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/self/" tabindex="0" data-v-471dd2d2 data-v-79f36db3><!--[--><span data-v-79f36db3>个人介绍</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-56b97c0f data-v-11fb0f5b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-11fb0f5b data-v-599084b8 data-v-739664f6><span class="check" data-v-739664f6><span class="icon" data-v-739664f6><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-599084b8><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-599084b8><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-56b97c0f data-v-293aafa9 data-v-99a410ba><!--[--><a class="VPSocialLink no-icon" href="https://github.com/ZiuChen" aria-label="github" target="_blank" rel="noopener" data-v-99a410ba data-v-72dca3b0><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://juejin.cn/user/1887205216238477" aria-label target="_blank" rel="noopener" data-v-99a410ba data-v-72dca3b0><svg width="36" height="28" viewBox="0 0 36 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5875 6.77268L21.8232 3.40505L17.5875 0.00748237L17.5837 0L13.3555 3.39757L17.5837 6.76894L17.5875 6.77268ZM17.5863 17.3955H17.59L28.5161 8.77432L25.5526 6.39453L17.59 12.6808H17.5863L17.5825 12.6845L9.61993 6.40201L6.66016 8.78181L17.5825 17.3992L17.5863 17.3955ZM17.5828 23.2891L17.5865 23.2854L32.2133 11.7456L35.1768 14.1254L28.5238 19.3752L17.5865 28L0.284376 14.3574L0 14.1291L2.95977 11.7531L17.5828 23.2891Z" fill="#1E80FF"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-56b97c0f data-v-54863f0d data-v-8f17ebbc><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-8f17ebbc><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-8f17ebbc><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-8f17ebbc><div class="VPMenu" data-v-8f17ebbc data-v-f5acf789><!----><!--[--><!--[--><!----><div class="group" data-v-54863f0d><div class="item appearance" data-v-54863f0d><p class="label" data-v-54863f0d>Appearance</p><div class="appearance-action" data-v-54863f0d><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-54863f0d data-v-599084b8 data-v-739664f6><span class="check" data-v-739664f6><span class="icon" data-v-739664f6><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-599084b8><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-599084b8><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-54863f0d><div class="item social-links" data-v-54863f0d><div class="VPSocialLinks social-links-list" data-v-54863f0d data-v-99a410ba><!--[--><a class="VPSocialLink no-icon" href="https://github.com/ZiuChen" aria-label="github" target="_blank" rel="noopener" data-v-99a410ba data-v-72dca3b0><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://juejin.cn/user/1887205216238477" aria-label target="_blank" rel="noopener" data-v-99a410ba data-v-72dca3b0><svg width="36" height="28" viewBox="0 0 36 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5875 6.77268L21.8232 3.40505L17.5875 0.00748237L17.5837 0L13.3555 3.39757L17.5837 6.76894L17.5875 6.77268ZM17.5863 17.3955H17.59L28.5161 8.77432L25.5526 6.39453L17.59 12.6808H17.5863L17.5825 12.6845L9.61993 6.40201L6.66016 8.78181L17.5825 17.3992L17.5863 17.3955ZM17.5828 23.2891L17.5865 23.2854L32.2133 11.7456L35.1768 14.1254L28.5238 19.3752L17.5865 28L0.284376 14.3574L0 14.1291L2.95977 11.7531L17.5828 23.2891Z" fill="#1E80FF"/></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-56b97c0f data-v-1b1f6b9e><span class="container" data-v-1b1f6b9e><span class="top" data-v-1b1f6b9e></span><span class="middle" data-v-1b1f6b9e></span><span class="bottom" data-v-1b1f6b9e></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-9d158fda data-v-5d953687><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-5d953687><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-5d953687><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-5d953687>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-5d953687 data-v-989d74b8><button data-v-989d74b8>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-9d158fda data-v-0e1b55d4><div class="curtain" data-v-0e1b55d4></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-0e1b55d4><span class="visually-hidden" id="sidebar-aria-label" data-v-0e1b55d4> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-0e1b55d4><section class="VPSidebarItem level-0" data-v-0e1b55d4 data-v-4a3e3544><div class="item" role="button" tabindex="0" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><h2 class="text" data-v-4a3e3544>我的项目</h2><!----></div><div class="items" data-v-4a3e3544><!--[--><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/project/ClipboardManager/" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>超级剪贴板</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/project/Markdown/" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>超级Markdown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/project/JSRunner/" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>超级JavaScript</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/project/SmartWordBreak/" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>超级分词</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-0e1b55d4><section class="VPSidebarItem level-0 collapsible collapsed" data-v-0e1b55d4 data-v-4a3e3544><div class="item" role="button" tabindex="0" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><h2 class="text" data-v-4a3e3544>开源作品</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-4a3e3544><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-4a3e3544><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-4a3e3544><!--[--><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/works/opensource.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>个人作品</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/works/contribution.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>社区贡献</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-0e1b55d4><section class="VPSidebarItem level-0 collapsible has-active" data-v-0e1b55d4 data-v-4a3e3544><div class="item" role="button" tabindex="0" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><h2 class="text" data-v-4a3e3544>文章归档</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-4a3e3544><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-4a3e3544><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-4a3e3544><!--[--><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/article/%E3%80%902023%E3%80%91%E9%9D%92%E8%AE%AD%E8%90%A5%20-%20%E5%89%8D%E7%AB%AF%E7%BB%83%E4%B9%A0%E9%A2%98%E6%B1%87%E6%80%BB%E8%A7%A3%E6%9E%90.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>【2023】青训营 - 前端练习题汇总解析</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/article/%E3%80%90%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E6%80%BB%E7%BB%93.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>【字节跳动】前端面试题总结</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/article/%E3%80%90%E5%BF%AB%E6%89%8B%E3%80%91%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>【快手】深入理解前端面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/article/%E3%80%90%E7%94%A8%E5%8F%8B%E9%87%91%E8%9E%8D%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E6%80%BB%E7%BB%93.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>【用友金融】前端面试题总结</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/article/%E4%B8%80%E6%96%87%E8%AF%BB%E6%87%82%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%E4%B8%8E%E4%BA%8B%E4%BB%B6%E6%8D%95%E8%8E%B7.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>一文读懂事件冒泡与事件捕获</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/article/%E4%B8%80%E6%96%87%E8%AF%BB%E6%87%82%E4%BC%AA%E7%B1%BB%E4%B8%8E%E4%BC%AA%E5%85%83%E7%B4%A0.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>一文读懂伪类与伪元素</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/article/%E4%B8%80%E6%96%87%E8%AF%BB%E6%87%82%E5%87%BD%E6%95%B0%E4%B8%ADthis%E6%8C%87%E5%90%91%E9%97%AE%E9%A2%98.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>一文读懂函数中this指向问题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/article/%E4%BB%8E0%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%B9%B4%E5%BA%A6%E6%8A%A5%E5%91%8A.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>从0实现一个年度报告</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/article/%E5%BD%BB%E5%BA%95%E6%90%9E%E6%87%82%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%95%B0%E6%8D%AE%E5%B1%9E%E6%80%A7%E6%8F%8F%E8%BF%B0%E7%AC%A6%E3%80%81%E5%AD%98%E5%82%A8%E5%B1%9E%E6%80%A7%E6%8F%8F%E8%BF%B0%E7%AC%A6.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>彻底搞懂对象的数据属性描述符、存储属性描述符</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/article/%E6%B5%85%E6%9E%90defineProperty%E4%B8%8EProxy%E5%AE%9E%E7%8E%B0%E7%9A%84%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>浅析defineProperty与Proxy实现的双向绑定</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5JavaScript%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>深入JavaScript数据类型</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5Vue3%E6%BA%90%E7%A0%81%EF%BC%8C%E7%9C%8B%E7%9C%8BVue.use%E5%90%8E%E7%A9%B6%E7%AB%9F%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88%EF%BC%9F.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>深入Vue3源码，看看Vue.use后究竟发生了什么？</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3Proxy%E4%B8%8EReflect.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>深入理解Proxy与Reflect</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98%E6%9C%BA%E5%88%B6.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>深入理解浏览器缓存机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E6%B5%8F%E8%A7%88%E5%99%A8%E8%BF%90%E8%A1%8C%E5%8E%9F%E7%90%86.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>深入理解浏览器运行原理</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-0e1b55d4><section class="VPSidebarItem level-0 collapsible collapsed" data-v-0e1b55d4 data-v-4a3e3544><div class="item" role="button" tabindex="0" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><h2 class="text" data-v-4a3e3544>学习笔记</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-4a3e3544><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-4a3e3544><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-4a3e3544><!--[--><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/JavaScript.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>JavaScript基础</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/CSS.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>CSS基础</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/JavaScriptEnhanced.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>JavaScript进阶</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/Front-end%20Engineering.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>前端工程化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/SSR.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>服务端渲染</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/React.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>React基础</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/React%20Hooks.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>React Hooks</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/Redux.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>Redux</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/React%20Router.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>React Router</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4a3e3544 data-v-4a3e3544><div class="item" data-v-4a3e3544><div class="indicator" data-v-4a3e3544></div><a class="VPLink link link" href="/note/MySQL.html" data-v-4a3e3544><!--[--><p class="text" data-v-4a3e3544>MySQL</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-9d158fda data-v-585eef7d><div class="VPDoc has-sidebar has-aside" data-v-585eef7d data-v-a686a8a6><!--[--><!--]--><div class="container" data-v-a686a8a6><div class="aside" data-v-a686a8a6><div class="aside-curtain" data-v-a686a8a6></div><div class="aside-container" data-v-a686a8a6><div class="aside-content" data-v-a686a8a6><div class="VPDocAside" data-v-a686a8a6 data-v-31570b60><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-31570b60 data-v-ba8455b5><div class="content" data-v-ba8455b5><div class="outline-marker" data-v-ba8455b5></div><div class="outline-title" role="heading" aria-level="2" data-v-ba8455b5>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-ba8455b5><span class="visually-hidden" id="doc-outline-aria-label" data-v-ba8455b5> Table of Contents for current page </span><ul class="root" data-v-ba8455b5 data-v-6713c9cc><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-31570b60></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-a686a8a6><div class="content-container" data-v-a686a8a6><!--[--><!--]--><!----><main class="main" data-v-a686a8a6><div style="position:relative;" class="vp-doc _article_%E3%80%90%E5%BF%AB%E6%89%8B%E3%80%91%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-a686a8a6><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><h3 id="vue生命周期" tabindex="-1">Vue生命周期 <a class="header-anchor" href="#vue生命周期" aria-label="Permalink to &quot;Vue生命周期&quot;">​</a></h3><p><code>beforeCreate created beforeMount mounted</code></p><p><code>beforeUpdate updated</code></p><p><code>beforeDestory destoryed</code></p><p>Vue3移除了<code>beforeCreate</code> <code>created</code>两个声明周期钩子，这是因为setup发生在开始创建组件之前，在<code>beforeCreate</code>和<code>created</code>之前执行</p><p>可以在setup中使用的生命周期函数：<code>onMounted</code> <code>onUpdated</code> <code>onUnmounted</code> <code>onBeforeUpdate</code>这几个，</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a299bd2229fb45d68a1cdd8731c94449~tplv-k3u1fbpfcp-zoom-1.image" alt="Vue 生命周期"></p><h3 id="网络请求一般在什么时候发起-为什么" tabindex="-1">网络请求一般在什么时候发起，为什么 <a class="header-anchor" href="#网络请求一般在什么时候发起-为什么" aria-label="Permalink to &quot;网络请求一般在什么时候发起，为什么&quot;">​</a></h3><p>越早越好，一般是放在<code>created</code>或<code>onMounted</code>或者<code>setup</code>中</p><ul><li><code>created</code>(vue2) 此时组件内的基本数据已经创建好，组件的模板结构尚未生成</li><li><code>mounted</code>(vue2) <code>onMounted</code>(vue3) 组件挂载到DOM树上，可以获取到DOM</li><li><code>setup</code>(vue3) 时机要早于<code>beforeCreated</code>和<code>created</code> 所以在setup中发起网络请求也可以</li></ul><h3 id="setup的执行时机相当于哪个生命周期" tabindex="-1">setup的执行时机相当于哪个生命周期 <a class="header-anchor" href="#setup的执行时机相当于哪个生命周期" aria-label="Permalink to &quot;setup的执行时机相当于哪个生命周期&quot;">​</a></h3><p><code>setup</code>的执行要早于<code>beforeCreated</code>和<code>created</code>，可以认为相当于这两个生命周期</p><h3 id="vue2和vue3的响应式原理" tabindex="-1">Vue2和Vue3的响应式原理 <a class="header-anchor" href="#vue2和vue3的响应式原理" aria-label="Permalink to &quot;Vue2和Vue3的响应式原理&quot;">​</a></h3><h4 id="vue2响应式原理" tabindex="-1">Vue2响应式原理 <a class="header-anchor" href="#vue2响应式原理" aria-label="Permalink to &quot;Vue2响应式原理&quot;">​</a></h4><p>全部使用<code>Object.defineProperty()</code>中的set与get函数</p><h4 id="vue3响应式原理" tabindex="-1">Vue3响应式原理 <a class="header-anchor" href="#vue3响应式原理" aria-label="Permalink to &quot;Vue3响应式原理&quot;">​</a></h4><p><code>ref</code>使用的是<code>Object.defineProperty()</code>，而<code>reactive</code>使用的是<code>Proxy</code></p><p><code>Proxy</code>可以直接深度代理一个对象，通过设置handler中的捕获器可以对对象创建一个代理，将各种行为监听并且同步到对象本身上</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">obj</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> name: </span><span style="color:#9ECBFF;">&#39;Ziu&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;"> age: </span><span style="color:#79B8FF;">18</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">proxy</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Proxy</span><span style="color:#E1E4E8;">(obj, {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">set</span><span style="color:#E1E4E8;">: </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">target</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">key</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">newVal</span><span style="color:#E1E4E8;">) {</span></span>
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">`监听: ${</span><span style="color:#E1E4E8;">key</span><span style="color:#9ECBFF;">} 设置 ${</span><span style="color:#E1E4E8;">newVal</span><span style="color:#9ECBFF;">}`</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;"> target[key] </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> newVal</span></span>
<span class="line"><span style="color:#E1E4E8;"> },</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">get</span><span style="color:#E1E4E8;">: </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">target</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">key</span><span style="color:#E1E4E8;">) {</span></span>
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">`监听: ${</span><span style="color:#E1E4E8;">key</span><span style="color:#9ECBFF;">} 获取`</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> target[key]</span></span>
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;">})</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">obj</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> name: </span><span style="color:#032F62;">&#39;Ziu&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;"> age: </span><span style="color:#005CC5;">18</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">proxy</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Proxy</span><span style="color:#24292E;">(obj, {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">set</span><span style="color:#24292E;">: </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">target</span><span style="color:#24292E;">, </span><span style="color:#E36209;">key</span><span style="color:#24292E;">, </span><span style="color:#E36209;">newVal</span><span style="color:#24292E;">) {</span></span>
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">`监听: ${</span><span style="color:#24292E;">key</span><span style="color:#032F62;">} 设置 ${</span><span style="color:#24292E;">newVal</span><span style="color:#032F62;">}`</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;"> target[key] </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> newVal</span></span>
<span class="line"><span style="color:#24292E;"> },</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">get</span><span style="color:#24292E;">: </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">target</span><span style="color:#24292E;">, </span><span style="color:#E36209;">key</span><span style="color:#24292E;">) {</span></span>
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">`监听: ${</span><span style="color:#24292E;">key</span><span style="color:#032F62;">} 获取`</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> target[key]</span></span>
<span class="line"><span style="color:#24292E;"> }</span></span>
<span class="line"><span style="color:#24292E;">})</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="proxy相比于defineproperty有何优势" tabindex="-1">Proxy相比于defineProperty有何优势 <a class="header-anchor" href="#proxy相比于defineproperty有何优势" aria-label="Permalink to &quot;Proxy相比于defineProperty有何优势&quot;">​</a></h3><p><a href="https://segmentfault.com/a/1190000041084082" target="_blank" rel="noreferrer">defineProperty 和 Proxy区别</a></p><ol><li><p><strong>监听数据的角度</strong></p><ol><li><code>defineproperty</code>只能监听某个属性而不能监听整个对象。</li><li><code>proxy</code>不用设置具体属性，直接监听整个对象。</li><li><code>defineproperty</code>监听需要知道是哪个对象的哪个属性，而<code>proxy</code>只需要知道哪个对象就可以了。也就是会省去<code>for in</code>循环提高了效率。</li></ol></li><li><p><strong>监听对原对象的影响</strong></p><ol><li>因为<code>defineproperty</code>是通过在原对象身上新增或修改属性增加描述符的方式实现的监听效果，一定会修改原数据。</li><li>而<code>proxy</code>只是原对象的代理，<code>proxy</code>会返回一个代理对象不会在原对象上进行改动，对原数据无污染。</li></ol></li><li><p><strong>实现对数组的监听</strong></p><ol><li>因为数组 <code>length</code> 的特殊性 <code>(length 的描述符configurable 和 enumerable 为 false，并且妄图修改 configurable 为 True 的话 js 会直接报错：VM305:1 Uncaught TypeError: Cannot redefine property: length)</code></li><li><code>defineproperty</code>无法监听数组长度变化, <code>Vue</code>只能通过重写数组方法的方式变现达成监听的效果，光重写数组方法还是不能解决修改数组下标时监听的问题，只能再使用自定义的<code>$set</code>的方式</li><li>而<code>proxy</code>因为自身特性，是创建新的代理对象而不是在原数据身上监听属性，对代理对象进行操作时，所有的操作都会被捕捉，包括数组的方法和<code>length</code>操作，再不需要重写数组方法和自定义<code>set</code>函数了。(代码示例在下方)</li></ol><p><strong>4. 监听的范围</strong></p><ol><li><code>defineproperty</code>只能监听到<code>value</code>的 <code>get set</code> 变化。</li><li><code>proxy</code>可以监听除 <code>[[getOwnPropertyNames]]</code> 以外所有<code>JS</code>的对象操作。监听的范围更大更全面。</li></ol></li></ol><h4 id="proxy优势" tabindex="-1">Proxy优势 <a class="header-anchor" href="#proxy优势" aria-label="Permalink to &quot;Proxy优势&quot;">​</a></h4><ul><li>Proxy可以直接监听整个对象而非属性。</li><li>Proxy可以直接监听数组的变化。</li><li>Proxy有13中拦截方法，如<code>ownKeys、deleteProperty、has</code> 等是 <code>Object.defineProperty</code> 不具备的。</li><li>Proxy返回的是一个新对象，我们可以只操作新的对象达到目的，而<code>Object.defineProperty</code>只能遍历对象属性直接修改;</li><li>Proxy做为新标准将受到浏览器产商重点持续的性能优化,也就是传说中的新标准的性能红利。</li></ul><h4 id="object-defineproperty优势" tabindex="-1">Object.defineProperty优势 <a class="header-anchor" href="#object-defineproperty优势" aria-label="Permalink to &quot;Object.defineProperty优势&quot;">​</a></h4><p>兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平。</p><h4 id="object-defineproperty劣势" tabindex="-1">Object.defineProperty劣势 <a class="header-anchor" href="#object-defineproperty劣势" aria-label="Permalink to &quot;Object.defineProperty劣势&quot;">​</a></h4><ul><li><code>Object.defineProperty</code> 只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。</li><li><code>Object.defineProperty</code>不能监听数组。是通过重写数据的那7个可以改变数据的方法来对数组进行监听的。</li><li><code>Object.defineProperty</code> 也不能对 <code>es6</code> 新产生的 <code>Map</code>,<code>Set</code> 这些数据结构做出监听。</li><li><code>Object.defineProperty</code>也不能监听新增和删除操作，通过 <code>Vue.set()</code>和 <code>Vue.delete</code>来实现响应式的。</li></ul><h3 id="vue3数据双向绑定原理" tabindex="-1">Vue3数据双向绑定原理 <a class="header-anchor" href="#vue3数据双向绑定原理" aria-label="Permalink to &quot;Vue3数据双向绑定原理&quot;">​</a></h3><h3 id="ref与reactive区别与适用场景" tabindex="-1">ref与reactive区别与适用场景 <a class="header-anchor" href="#ref与reactive区别与适用场景" aria-label="Permalink to &quot;ref与reactive区别与适用场景&quot;">​</a></h3><ul><li>ref接受的数据类型：基本类型（string number bigint boolean undefined symbol null），引用类型 <ul><li>把参数加工成一个响应式对象，全称为reference对象(简称为ref对象)</li><li>如果参数是基本类型，那么形成响应式依赖于<code>Object.defineProperty()</code>的get()和set()</li><li>如果ref的参数是引用类型，底层ref会借助reactive的Proxy生成代理对象，从外部依然是通过<code>.value</code>获取</li></ul></li><li>reactive只接受引用类型（Object Array） <ul><li>它的响应式是更深层次的，底层是将数据包装成一个Proxy</li><li>参数必须是对象或者数组，如果要让对象的某个元素实现响应式时比较麻烦。需要使用toRefs</li><li>必须只使用那些不会改变引用地址的操作，否则会丢失响应性，如解构、重新赋值</li></ul></li></ul><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">obj1</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">({ name: </span><span style="color:#9ECBFF;">&#39;Ziu&#39;</span><span style="color:#E1E4E8;">, age: </span><span style="color:#79B8FF;">18</span><span style="color:#E1E4E8;"> })</span></span>
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(obj1) </span><span style="color:#6A737D;">// RefImpl</span></span>
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(obj1.value) </span><span style="color:#6A737D;">// Proxy</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">obj2</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">reactive</span><span style="color:#E1E4E8;">({</span></span>
<span class="line"><span style="color:#E1E4E8;"> name: </span><span style="color:#9ECBFF;">&#39;Kobe&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;"> age: </span><span style="color:#79B8FF;">19</span></span>
<span class="line"><span style="color:#E1E4E8;">})</span></span>
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(obj2) </span><span style="color:#6A737D;">// Proxy</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">obj1</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">({ name: </span><span style="color:#032F62;">&#39;Ziu&#39;</span><span style="color:#24292E;">, age: </span><span style="color:#005CC5;">18</span><span style="color:#24292E;"> })</span></span>
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(obj1) </span><span style="color:#6A737D;">// RefImpl</span></span>
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(obj1.value) </span><span style="color:#6A737D;">// Proxy</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">obj2</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">reactive</span><span style="color:#24292E;">({</span></span>
<span class="line"><span style="color:#24292E;"> name: </span><span style="color:#032F62;">&#39;Kobe&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;"> age: </span><span style="color:#005CC5;">19</span></span>
<span class="line"><span style="color:#24292E;">})</span></span>
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(obj2) </span><span style="color:#6A737D;">// Proxy</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="vue3功能上相比于vue2有哪些优点" tabindex="-1">Vue3功能上相比于Vue2有哪些优点 <a class="header-anchor" href="#vue3功能上相比于vue2有哪些优点" aria-label="Permalink to &quot;Vue3功能上相比于Vue2有哪些优点&quot;">​</a></h3><ul><li>Composition API <ul><li>生命周期钩子</li><li><code>ref() reactive()</code></li><li>hook复用代码</li></ul></li><li>不再需要根标签 (Fragments)</li><li>性能提升 diff算法</li><li>Proxy与defineProperty</li></ul><p><a href="https://juejin.cn/post/6892295955844956167" target="_blank" rel="noreferrer">Vue3 对比 Vue2.x 差异性、注意点、整体梳理，与React hook比又如何？</a></p><h3 id="vue组件传参方法" tabindex="-1">Vue组件传参方法 <a class="header-anchor" href="#vue组件传参方法" aria-label="Permalink to &quot;Vue组件传参方法&quot;">​</a></h3><ul><li>prop &amp; emit</li><li>provide &amp; inject</li><li>子组件defineExpose 父组件ref获取</li></ul><h3 id="vuex异步操作如何同时修改多个state" tabindex="-1">Vuex异步操作如何同时修改多个state <a class="header-anchor" href="#vuex异步操作如何同时修改多个state" aria-label="Permalink to &quot;Vuex异步操作如何同时修改多个state&quot;">​</a></h3><h3 id="es6特性了解哪些" tabindex="-1">ES6特性了解哪些 <a class="header-anchor" href="#es6特性了解哪些" aria-label="Permalink to &quot;ES6特性了解哪些&quot;">​</a></h3><ul><li>let &amp; const <ul><li>独立作用域</li></ul></li><li>箭头函数 <ul><li>无this 无arguments对象</li></ul></li><li>Promise <ul><li>类方法、实例方法</li></ul></li><li>async await <ul><li>异步函数 生成器语法糖</li></ul></li></ul><h3 id="let-const的特性" tabindex="-1">let &amp; const的特性 <a class="header-anchor" href="#let-const的特性" aria-label="Permalink to &quot;let &amp; const的特性&quot;">​</a></h3><p>不存在变量提升 暂时性死区</p><blockquote><p>ES6 明确规定，如果区块中存在<code>let</code>和<code>const</code>命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。</p></blockquote><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">var</span><span style="color:#E1E4E8;"> tmp </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">123</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (</span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">) {</span></span>
<span class="line"><span style="color:#E1E4E8;"> tmp </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;abc&#39;</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> tmp;</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span>
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;tmp =&#39;</span><span style="color:#E1E4E8;">, tmp);</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">var</span><span style="color:#24292E;"> tmp </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">123</span><span style="color:#24292E;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (</span><span style="color:#005CC5;">true</span><span style="color:#24292E;">) {</span></span>
<span class="line"><span style="color:#24292E;"> tmp </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;abc&#39;</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">let</span><span style="color:#24292E;"> tmp;</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;tmp =&#39;</span><span style="color:#24292E;">, tmp);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="promise介绍一下" tabindex="-1">Promise介绍一下 <a class="header-anchor" href="#promise介绍一下" aria-label="Permalink to &quot;Promise介绍一下&quot;">​</a></h3><ul><li>三种状态 <code>pending fulfilled rejected</code></li><li>类方法 <code>.resolve .reject .all .race .any</code></li><li>实例方法 <code>.then .catch .finally .allSettled</code><ul><li><code>.then</code>方法两个入参 一个是上一个Promise对象resolved的回调 另一个是rejected的回调，返回一个新的Promise对象</li><li><code>.then</code>传入的回调函数会被加入微任务队列</li><li><code>.catch</code>本质上是只有错误处理函数的<code>.then</code></li></ul></li></ul><h3 id="promise-all-race-any功能及区别" tabindex="-1">Promise.all .race .any功能及区别 <a class="header-anchor" href="#promise-all-race-any功能及区别" aria-label="Permalink to &quot;Promise.all .race .any功能及区别&quot;">​</a></h3><p>传入的都是一个可迭代对象(iterable)，迭代器，类似Array</p><ul><li>Promise.all() 所有都resolved 将结果按顺序放入数组中返回 如果某个rejected则直接rejected，原因为第一个rejected的原因</li><li>Promise.race() 一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝</li><li>Promise.any() any方法会等到一个fulfilled状态，才会决定新的Promise状态 如果所有Promise都是reject的，那么也会等到所有Promise都变成rejected状态</li></ul><h3 id="promise看代码写结果" tabindex="-1">Promise看代码写结果 <a class="header-anchor" href="#promise看代码写结果" aria-label="Permalink to &quot;Promise看代码写结果&quot;">​</a></h3><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">testPromise</span><span style="color:#E1E4E8;">() {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">Promise</span><span style="color:#E1E4E8;">((</span><span style="color:#FFAB70;">resolve</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">reject</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;1&#39;</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">resolve</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">2</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">reject</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;4&#39;</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;"> }).</span><span style="color:#B392F0;">then</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">res</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;res = &#39;</span><span style="color:#E1E4E8;">, res);</span></span>
<span class="line"><span style="color:#E1E4E8;"> }, </span><span style="color:#FFAB70;">err</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;err =&#39;</span><span style="color:#E1E4E8;">, err);</span></span>
<span class="line"><span style="color:#E1E4E8;"> });</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#B392F0;">testPromise</span><span style="color:#E1E4E8;">();</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">testPromise</span><span style="color:#24292E;">() {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">Promise</span><span style="color:#24292E;">((</span><span style="color:#E36209;">resolve</span><span style="color:#24292E;">, </span><span style="color:#E36209;">reject</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;1&#39;</span><span style="color:#24292E;">);</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">resolve</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">2</span><span style="color:#24292E;">);</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">reject</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">3</span><span style="color:#24292E;">);</span></span>
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;4&#39;</span><span style="color:#24292E;">);</span></span>
<span class="line"><span style="color:#24292E;"> }).</span><span style="color:#6F42C1;">then</span><span style="color:#24292E;">(</span><span style="color:#E36209;">res</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;res = &#39;</span><span style="color:#24292E;">, res);</span></span>
<span class="line"><span style="color:#24292E;"> }, </span><span style="color:#E36209;">err</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;err =&#39;</span><span style="color:#24292E;">, err);</span></span>
<span class="line"><span style="color:#24292E;"> });</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6F42C1;">testPromise</span><span style="color:#24292E;">();</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>输出结果：<code>1 4 res = 2</code></p><p>执行<code>resolve</code>之后，当前Promise的状态变为<code>fulfilled</code>不再改变，即使后面继续调用了<code>reject</code>，后续代码继续执行输出<code>&#39;4&#39;</code>，随后执行微任务中的<code>.then</code>，输出<code>res = 2</code></p><h3 id="手写promise-all" tabindex="-1">手写Promise.all() <a class="header-anchor" href="#手写promise-all" aria-label="Permalink to &quot;手写Promise.all()&quot;">​</a></h3><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">selfPromiseAll</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">iterable</span><span style="color:#E1E4E8;">) {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">Promise</span><span style="color:#E1E4E8;">((</span><span style="color:#FFAB70;">resolve</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">reject</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">promises</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> Array.</span><span style="color:#B392F0;">from</span><span style="color:#E1E4E8;">(iterable) </span><span style="color:#6A737D;">// 将可迭代对象转为数组</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">result</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> [] </span><span style="color:#6A737D;">// 保存结果</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> count </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 记录是否所有promise都执行完毕</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 并发执行每一个promise</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">for</span><span style="color:#E1E4E8;"> (</span><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> i </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">; i </span><span style="color:#F97583;">&lt;</span><span style="color:#E1E4E8;"> promises.</span><span style="color:#79B8FF;">length</span><span style="color:#E1E4E8;">; i</span><span style="color:#F97583;">++</span><span style="color:#E1E4E8;">) {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">Promise</span><span style="color:#E1E4E8;">.</span><span style="color:#B392F0;">resolve</span><span style="color:#E1E4E8;">(promises[i])</span></span>
<span class="line"><span style="color:#E1E4E8;"> .</span><span style="color:#B392F0;">then</span><span style="color:#E1E4E8;">((</span><span style="color:#FFAB70;">res</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> result[i] </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> res </span><span style="color:#6A737D;">// 将结果按顺序存入result</span></span>
<span class="line"><span style="color:#E1E4E8;"> count</span><span style="color:#F97583;">++</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 保证每一个Promise都执行完毕后再resolve</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (count </span><span style="color:#F97583;">===</span><span style="color:#E1E4E8;"> promises.</span><span style="color:#79B8FF;">length</span><span style="color:#E1E4E8;">) {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">resolve</span><span style="color:#E1E4E8;">(result)</span></span>
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
<span class="line"><span style="color:#E1E4E8;"> .</span><span style="color:#B392F0;">catch</span><span style="color:#E1E4E8;">((</span><span style="color:#FFAB70;">err</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">reject</span><span style="color:#E1E4E8;">(err)) </span><span style="color:#6A737D;">// 只要有reject 外部Promise直接reject</span></span>
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
<span class="line"><span style="color:#E1E4E8;"> }</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">selfPromiseAll</span><span style="color:#24292E;">(</span><span style="color:#E36209;">iterable</span><span style="color:#24292E;">) {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">Promise</span><span style="color:#24292E;">((</span><span style="color:#E36209;">resolve</span><span style="color:#24292E;">, </span><span style="color:#E36209;">reject</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">promises</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> Array.</span><span style="color:#6F42C1;">from</span><span style="color:#24292E;">(iterable) </span><span style="color:#6A737D;">// 将可迭代对象转为数组</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">result</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> [] </span><span style="color:#6A737D;">// 保存结果</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">let</span><span style="color:#24292E;"> count </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">0</span><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 记录是否所有promise都执行完毕</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 并发执行每一个promise</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">for</span><span style="color:#24292E;"> (</span><span style="color:#D73A49;">let</span><span style="color:#24292E;"> i </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">0</span><span style="color:#24292E;">; i </span><span style="color:#D73A49;">&lt;</span><span style="color:#24292E;"> promises.</span><span style="color:#005CC5;">length</span><span style="color:#24292E;">; i</span><span style="color:#D73A49;">++</span><span style="color:#24292E;">) {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">Promise</span><span style="color:#24292E;">.</span><span style="color:#6F42C1;">resolve</span><span style="color:#24292E;">(promises[i])</span></span>
<span class="line"><span style="color:#24292E;"> .</span><span style="color:#6F42C1;">then</span><span style="color:#24292E;">((</span><span style="color:#E36209;">res</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> result[i] </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> res </span><span style="color:#6A737D;">// 将结果按顺序存入result</span></span>
<span class="line"><span style="color:#24292E;"> count</span><span style="color:#D73A49;">++</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 保证每一个Promise都执行完毕后再resolve</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (count </span><span style="color:#D73A49;">===</span><span style="color:#24292E;"> promises.</span><span style="color:#005CC5;">length</span><span style="color:#24292E;">) {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">resolve</span><span style="color:#24292E;">(result)</span></span>
<span class="line"><span style="color:#24292E;"> }</span></span>
<span class="line"><span style="color:#24292E;"> })</span></span>
<span class="line"><span style="color:#24292E;"> .</span><span style="color:#6F42C1;">catch</span><span style="color:#24292E;">((</span><span style="color:#E36209;">err</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">reject</span><span style="color:#24292E;">(err)) </span><span style="color:#6A737D;">// 只要有reject 外部Promise直接reject</span></span>
<span class="line"><span style="color:#24292E;"> }</span></span>
<span class="line"><span style="color:#24292E;"> })</span></span>
<span class="line"><span style="color:#24292E;"> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h3 id="cookie-localstorage-sessionstorage区别及使用场景" tabindex="-1">Cookie localStorage SessionStorage区别及使用场景 <a class="header-anchor" href="#cookie-localstorage-sessionstorage区别及使用场景" aria-label="Permalink to &quot;Cookie localStorage SessionStorage区别及使用场景&quot;">​</a></h3><table><thead><tr><th></th><th>cookie</th><th>localStorage</th><th>sessionStorage</th></tr></thead><tbody><tr><td>大小</td><td>4Kb</td><td>5MB</td><td>5MB</td></tr><tr><td>兼容</td><td>H4/H5</td><td>H5</td><td>H5</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><tr><td>语法</td><td>复杂</td><td>简单</td><td>简单</td></tr></tbody></table><ul><li>Cookie是由<code>?key1=value1;key2=value2</code>组成的，可以通过<code>encodeURIComponent()</code>来保证它不包含任何逗号、分号或空格(cookie值中禁止使用这些值).</li><li>Cookie一般的字段有<code>path domain max-age expires secure</code></li><li>不同的host之间的localStorage、sessionStorage对象是隔离的</li></ul><h3 id="localstorage常用方法" tabindex="-1">localStorage常用方法 <a class="header-anchor" href="#localstorage常用方法" aria-label="Permalink to &quot;localStorage常用方法&quot;">​</a></h3><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">localStorage.</span><span style="color:#B392F0;">setItem</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;key&#39;</span><span style="color:#E1E4E8;">, value)</span></span>
<span class="line"><span style="color:#E1E4E8;">localStorage.</span><span style="color:#B392F0;">getItem</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;key&#39;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;">localStorage.</span><span style="color:#B392F0;">removeItem</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;key&#39;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;">localStorage.</span><span style="color:#B392F0;">clear</span><span style="color:#E1E4E8;">()</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">localStorage.</span><span style="color:#6F42C1;">setItem</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;key&#39;</span><span style="color:#24292E;">, value)</span></span>
<span class="line"><span style="color:#24292E;">localStorage.</span><span style="color:#6F42C1;">getItem</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;key&#39;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;">localStorage.</span><span style="color:#6F42C1;">removeItem</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;key&#39;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;">localStorage.</span><span style="color:#6F42C1;">clear</span><span style="color:#24292E;">()</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="跨域解决方法" tabindex="-1">跨域解决方法 <a class="header-anchor" href="#跨域解决方法" aria-label="Permalink to &quot;跨域解决方法&quot;">​</a></h3><ul><li>JSONP</li><li>CORS</li><li>代理服务器</li></ul><h4 id="jsonp" tabindex="-1">JSONP <a class="header-anchor" href="#jsonp" aria-label="Permalink to &quot;JSONP&quot;">​</a></h4><p>根据同源策略的限制，在<strong>端口，域名，协议</strong>这三者<strong>一个或者多个不同的情况下</strong>，就会出现跨域限制，请求发送到了服务器并且服务器也响应了数据，但是浏览器不会为你展示出来。</p><p>但是，<code>&lt;script&gt;</code> 标签访问时，可以跨越这些同源策略限制，但只能使用 <code>GET</code> 方法：</p><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">jsonCallback</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">data</span><span style="color:#E1E4E8;">) {</span></span>
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(data)</span></span>
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;https://c.y.qq.com/qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">jsonCallback</span><span style="color:#24292E;">(</span><span style="color:#E36209;">data</span><span style="color:#24292E;">) {</span></span>
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(data)</span></span>
<span class="line"><span style="color:#24292E;"> }</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;https://c.y.qq.com/qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg&quot;</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><code>&lt;script&gt;</code>标签返回的是一段由函数<code>jsonCallback</code>包裹的数据，这样在页面中就可以拿到跨域的数据了</p><h3 id="介绍一下事件循环" tabindex="-1">介绍一下事件循环 <a class="header-anchor" href="#介绍一下事件循环" aria-label="Permalink to &quot;介绍一下事件循环&quot;">​</a></h3><p>主线程 宏任务 微任务 EventTable EventQueue</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 line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#B392F0;">setTimeout</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;time1&#39;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">Promise</span><span style="color:#E1E4E8;">.</span><span style="color:#B392F0;">resolve</span><span style="color:#E1E4E8;">()</span></span>
<span class="line"><span style="color:#E1E4E8;"> .</span><span style="color:#B392F0;">then</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;promise1&#39;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;"> process.</span><span style="color:#B392F0;">nextTick</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;next tick1&#39;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
<span class="line"><span style="color:#E1E4E8;"> .</span><span style="color:#B392F0;">catch</span><span style="color:#E1E4E8;">((</span><span style="color:#FFAB70;">err</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(err)</span></span>
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
<span class="line"><span style="color:#E1E4E8;">})</span></span>
<span class="line"></span>
<span class="line"><span style="color:#B392F0;">setTimeout</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;time2&#39;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">Promise</span><span style="color:#E1E4E8;">((</span><span style="color:#FFAB70;">res</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">res</span><span style="color:#E1E4E8;">()</span></span>
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;promise2&#39;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;"> process.</span><span style="color:#B392F0;">nextTick</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;next tick2&#39;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
<span class="line"><span style="color:#E1E4E8;"> }).</span><span style="color:#B392F0;">then</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;promise3&#39;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
<span class="line"><span style="color:#E1E4E8;">})</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6F42C1;">setTimeout</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;time1&#39;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">Promise</span><span style="color:#24292E;">.</span><span style="color:#6F42C1;">resolve</span><span style="color:#24292E;">()</span></span>
<span class="line"><span style="color:#24292E;"> .</span><span style="color:#6F42C1;">then</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;promise1&#39;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;"> process.</span><span style="color:#6F42C1;">nextTick</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;next tick1&#39;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;"> })</span></span>
<span class="line"><span style="color:#24292E;"> })</span></span>
<span class="line"><span style="color:#24292E;"> .</span><span style="color:#6F42C1;">catch</span><span style="color:#24292E;">((</span><span style="color:#E36209;">err</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(err)</span></span>
<span class="line"><span style="color:#24292E;"> })</span></span>
<span class="line"><span style="color:#24292E;">})</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6F42C1;">setTimeout</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;time2&#39;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">Promise</span><span style="color:#24292E;">((</span><span style="color:#E36209;">res</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">res</span><span style="color:#24292E;">()</span></span>
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;promise2&#39;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;"> process.</span><span style="color:#6F42C1;">nextTick</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;next tick2&#39;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;"> })</span></span>
<span class="line"><span style="color:#24292E;"> }).</span><span style="color:#6F42C1;">then</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;promise3&#39;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;"> })</span></span>
<span class="line"><span style="color:#24292E;">})</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><p>输出顺序： <code>time1 promise1 next tick1 time2 promise2 next tick2 promise3</code></p><h3 id="介绍一下flex布局" tabindex="-1">介绍一下Flex布局 <a class="header-anchor" href="#介绍一下flex布局" aria-label="Permalink to &quot;介绍一下Flex布局&quot;">​</a></h3><ul><li>主轴 交叉轴</li><li>flex container <ul><li>应用在flex container上的属性</li></ul></li><li>flex item <ul><li>应用在flex item上的属性</li><li><code>flex: 1</code>含义</li></ul></li></ul><h2 id="快手二面" tabindex="-1">快手二面 <a class="header-anchor" href="#快手二面" aria-label="Permalink to &quot;快手二面&quot;">​</a></h2><h3 id="css主题切换方案" tabindex="-1">CSS主题切换方案 <a class="header-anchor" href="#css主题切换方案" aria-label="Permalink to &quot;CSS主题切换方案&quot;">​</a></h3><ul><li>将颜色变量抽取为CSS Variable</li><li>使用<code>:root</code>选择器定义变量</li><li>根据根组件不同的<code>class</code>切换颜色</li></ul><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">style</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:root</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--text-color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">#1f1f1f</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--bg-color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">#f5f5f5</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--primary-color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">#1890ff</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:root.dark</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--text-color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">#f5f5f5</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--bg-color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">#1f1f1f</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#FFAB70;">--primary-color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">#1890ff</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">.card</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">var</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">--text-color</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">background-color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">var</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">--bg-color</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">padding</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">10</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">max-width</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">300</span><span style="color:#F97583;">px</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">transition</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">all</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0.2</span><span style="color:#F97583;">s</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">.card</span><span style="color:#E1E4E8;"> </span><span style="color:#85E89D;">h2</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">color</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">var</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">--primary-color</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">style</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">id</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;dark-mode&quot;</span><span style="color:#E1E4E8;">&gt;Toggle Dark Mode&lt;/</span><span style="color:#85E89D;">button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;card&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">h2</span><span style="color:#E1E4E8;">&gt;跨站脚本攻击（XSS）&lt;/</span><span style="color:#85E89D;">h2</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Cross-Site</span></span>
<span class="line"><span style="color:#E1E4E8;"> Scripting（跨站脚本攻击）简称XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如</span></span>
<span class="line"><span style="color:#E1E4E8;"> Cookie、SessionID 等，进而危害数据安全。 为了和 CSS 区分，这里把攻击的第一个字母改成了</span></span>
<span class="line"><span style="color:#E1E4E8;"> X，于是叫做 XSS。</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">root</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> document.</span><span style="color:#B392F0;">querySelector</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;html&#39;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">btn</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> document.</span><span style="color:#B392F0;">querySelector</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;#dark-mode&#39;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;"> btn.</span><span style="color:#B392F0;">addEventListener</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;click&#39;</span><span style="color:#E1E4E8;">, () </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> root.classList.</span><span style="color:#B392F0;">toggle</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;dark&#39;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;"> })</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">style</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:root</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#E36209;">--text-color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">#1f1f1f</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#E36209;">--bg-color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">#f5f5f5</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#E36209;">--primary-color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">#1890ff</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> }</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:root.dark</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#E36209;">--text-color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">#f5f5f5</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#E36209;">--bg-color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">#1f1f1f</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#E36209;">--primary-color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">#1890ff</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> }</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">.card</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">var</span><span style="color:#24292E;">(</span><span style="color:#E36209;">--text-color</span><span style="color:#24292E;">);</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">background-color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">var</span><span style="color:#24292E;">(</span><span style="color:#E36209;">--bg-color</span><span style="color:#24292E;">);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">padding</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">10</span><span style="color:#D73A49;">px</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">max-width</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">300</span><span style="color:#D73A49;">px</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">transition</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">all</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">0.2</span><span style="color:#D73A49;">s</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> }</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">.card</span><span style="color:#24292E;"> </span><span style="color:#22863A;">h2</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">var</span><span style="color:#24292E;">(</span><span style="color:#E36209;">--primary-color</span><span style="color:#24292E;">);</span></span>
<span class="line"><span style="color:#24292E;"> }</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">style</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">id</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;dark-mode&quot;</span><span style="color:#24292E;">&gt;Toggle Dark Mode&lt;/</span><span style="color:#22863A;">button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;card&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">h2</span><span style="color:#24292E;">&gt;跨站脚本攻击（XSS）&lt;/</span><span style="color:#22863A;">h2</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Cross-Site</span></span>
<span class="line"><span style="color:#24292E;"> Scripting（跨站脚本攻击）简称XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如</span></span>
<span class="line"><span style="color:#24292E;"> Cookie、SessionID 等，进而危害数据安全。 为了和 CSS 区分，这里把攻击的第一个字母改成了</span></span>
<span class="line"><span style="color:#24292E;"> X，于是叫做 XSS。</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">root</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> document.</span><span style="color:#6F42C1;">querySelector</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;html&#39;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">btn</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> document.</span><span style="color:#6F42C1;">querySelector</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;#dark-mode&#39;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;"> btn.</span><span style="color:#6F42C1;">addEventListener</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;click&#39;</span><span style="color:#24292E;">, () </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> root.classList.</span><span style="color:#6F42C1;">toggle</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;dark&#39;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;"> })</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br></div></div><h3 id="proxy与defineproperty实现数据劫持" tabindex="-1">Proxy与defineProperty实现数据劫持 <a class="header-anchor" href="#proxy与defineproperty实现数据劫持" aria-label="Permalink to &quot;Proxy与defineProperty实现数据劫持&quot;">​</a></h3><p><a href="https://juejin.cn/post/7179634726309724219" target="_blank" rel="noreferrer">深入理解Proxy与Reflect</a></p><h3 id="算法-两数之和-修改版" tabindex="-1">算法: 两数之和-修改版 <a class="header-anchor" href="#算法-两数之和-修改版" aria-label="Permalink to &quot;算法: 两数之和-修改版&quot;">​</a></h3><p>从数组中找到两数之和为目标值的数字对数 不允许重复使用数字</p><ul><li><code>[1, 2, 3, 4, 4], 5</code> 结果为 <code>2</code></li><li><code>[1, 1, 2, 3, 4, 4], 5</code> 结果为 <code>3</code></li></ul><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark has-diff vp-code-dark"><code><span class="line"><span style="color:#6A737D;">/**</span></span>
<span class="line"><span style="color:#6A737D;"> * 从数组中找到两数之和为目标值的数字对数 不允许重复使用数字</span></span>
<span class="line"><span style="color:#6A737D;"> * </span><span style="color:#F97583;">@param</span><span style="color:#6A737D;"> </span><span style="color:#B392F0;">{number[]}</span><span style="color:#6A737D;"> </span><span style="color:#E1E4E8;">nums</span><span style="color:#6A737D;"> 数组</span></span>
<span class="line"><span style="color:#6A737D;"> * </span><span style="color:#F97583;">@param</span><span style="color:#6A737D;"> </span><span style="color:#B392F0;">{number}</span><span style="color:#6A737D;"> </span><span style="color:#E1E4E8;">target</span><span style="color:#6A737D;"> 目标值</span></span>
<span class="line"><span style="color:#6A737D;"> * </span><span style="color:#F97583;">@returns</span><span style="color:#6A737D;"> </span><span style="color:#B392F0;">{number}</span><span style="color:#6A737D;"> 次数</span></span>
<span class="line"><span style="color:#6A737D;"> */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">twoSum</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">nums</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">target</span><span style="color:#E1E4E8;">) {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 边界情况</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (nums.</span><span style="color:#79B8FF;">length</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">&lt;</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">2</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> count </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">map</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Map</span><span style="color:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">for</span><span style="color:#E1E4E8;"> (</span><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> i </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">; i </span><span style="color:#F97583;">&lt;</span><span style="color:#E1E4E8;"> nums.</span><span style="color:#79B8FF;">length</span><span style="color:#E1E4E8;">; i</span><span style="color:#F97583;">++</span><span style="color:#E1E4E8;">) {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">num</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> nums[i]</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">diff</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> target </span><span style="color:#F97583;">-</span><span style="color:#E1E4E8;"> num</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">value</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> map.</span><span style="color:#B392F0;">get</span><span style="color:#E1E4E8;">(diff) </span><span style="color:#6A737D;">// undefined | number</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 如果找到了与diff相等的num</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (value </span><span style="color:#F97583;">!==</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">undefined</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">&amp;&amp;</span><span style="color:#E1E4E8;"> value </span><span style="color:#F97583;">&gt;</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">) {</span></span>
<span class="line"><span style="color:#E1E4E8;"> count</span><span style="color:#F97583;">++</span></span>
<span class="line"><span style="color:#E1E4E8;"> map.</span><span style="color:#B392F0;">set</span><span style="color:#E1E4E8;">(diff, value </span><span style="color:#F97583;">-</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">// 剩余数字个数-1</span></span>
<span class="line"><span style="color:#E1E4E8;"> } </span><span style="color:#F97583;">else</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 未找到 则将num设为键 值为出现次数</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">count</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> map.</span><span style="color:#B392F0;">get</span><span style="color:#E1E4E8;">(num) </span><span style="color:#F97583;">===</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">undefined</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">?</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> map.</span><span style="color:#B392F0;">get</span><span style="color:#E1E4E8;">(num) </span><span style="color:#F97583;">+</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span></span>
<span class="line"><span style="color:#E1E4E8;"> map.</span><span style="color:#B392F0;">set</span><span style="color:#E1E4E8;">(num, count)</span></span>
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
<span class="line"><span style="color:#E1E4E8;"> }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> count</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#B392F0;">twoSum</span><span style="color:#E1E4E8;">([</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">2</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">4</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">4</span><span style="color:#E1E4E8;">], </span><span style="color:#79B8FF;">5</span><span style="color:#E1E4E8;">)) </span><span style="color:#6A737D;">// 2</span></span>
<span class="line"><span style="color:#E1E4E8;">console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#B392F0;">twoSum</span><span style="color:#E1E4E8;">([</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">2</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">4</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">4</span><span style="color:#E1E4E8;">], </span><span style="color:#79B8FF;">5</span><span style="color:#E1E4E8;">)) </span><span style="color:#6A737D;">// 3</span></span></code></pre><pre class="shiki github-light has-diff vp-code-light"><code><span class="line"><span style="color:#6A737D;">/**</span></span>
<span class="line"><span style="color:#6A737D;"> * 从数组中找到两数之和为目标值的数字对数 不允许重复使用数字</span></span>
<span class="line"><span style="color:#6A737D;"> * </span><span style="color:#D73A49;">@param</span><span style="color:#6A737D;"> </span><span style="color:#6F42C1;">{number[]}</span><span style="color:#6A737D;"> </span><span style="color:#24292E;">nums</span><span style="color:#6A737D;"> 数组</span></span>
<span class="line"><span style="color:#6A737D;"> * </span><span style="color:#D73A49;">@param</span><span style="color:#6A737D;"> </span><span style="color:#6F42C1;">{number}</span><span style="color:#6A737D;"> </span><span style="color:#24292E;">target</span><span style="color:#6A737D;"> 目标值</span></span>
<span class="line"><span style="color:#6A737D;"> * </span><span style="color:#D73A49;">@returns</span><span style="color:#6A737D;"> </span><span style="color:#6F42C1;">{number}</span><span style="color:#6A737D;"> 次数</span></span>
<span class="line"><span style="color:#6A737D;"> */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">twoSum</span><span style="color:#24292E;">(</span><span style="color:#E36209;">nums</span><span style="color:#24292E;">, </span><span style="color:#E36209;">target</span><span style="color:#24292E;">) {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 边界情况</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (nums.</span><span style="color:#005CC5;">length</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">&lt;</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">2</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">0</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">let</span><span style="color:#24292E;"> count </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">0</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">map</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Map</span><span style="color:#24292E;">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">for</span><span style="color:#24292E;"> (</span><span style="color:#D73A49;">let</span><span style="color:#24292E;"> i </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">0</span><span style="color:#24292E;">; i </span><span style="color:#D73A49;">&lt;</span><span style="color:#24292E;"> nums.</span><span style="color:#005CC5;">length</span><span style="color:#24292E;">; i</span><span style="color:#D73A49;">++</span><span style="color:#24292E;">) {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">num</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> nums[i]</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">diff</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> target </span><span style="color:#D73A49;">-</span><span style="color:#24292E;"> num</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">value</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> map.</span><span style="color:#6F42C1;">get</span><span style="color:#24292E;">(diff) </span><span style="color:#6A737D;">// undefined | number</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 如果找到了与diff相等的num</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (value </span><span style="color:#D73A49;">!==</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">undefined</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">&amp;&amp;</span><span style="color:#24292E;"> value </span><span style="color:#D73A49;">&gt;</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">0</span><span style="color:#24292E;">) {</span></span>
<span class="line"><span style="color:#24292E;"> count</span><span style="color:#D73A49;">++</span></span>
<span class="line"><span style="color:#24292E;"> map.</span><span style="color:#6F42C1;">set</span><span style="color:#24292E;">(diff, value </span><span style="color:#D73A49;">-</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">// 剩余数字个数-1</span></span>
<span class="line"><span style="color:#24292E;"> } </span><span style="color:#D73A49;">else</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 未找到 则将num设为键 值为出现次数</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">count</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> map.</span><span style="color:#6F42C1;">get</span><span style="color:#24292E;">(num) </span><span style="color:#D73A49;">===</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">undefined</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">?</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> map.</span><span style="color:#6F42C1;">get</span><span style="color:#24292E;">(num) </span><span style="color:#D73A49;">+</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1</span></span>
<span class="line"><span style="color:#24292E;"> map.</span><span style="color:#6F42C1;">set</span><span style="color:#24292E;">(num, count)</span></span>
<span class="line"><span style="color:#24292E;"> }</span></span>
<span class="line"><span style="color:#24292E;"> }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> count</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#6F42C1;">twoSum</span><span style="color:#24292E;">([</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">2</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">3</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">4</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">4</span><span style="color:#24292E;">], </span><span style="color:#005CC5;">5</span><span style="color:#24292E;">)) </span><span style="color:#6A737D;">// 2</span></span>
<span class="line"><span style="color:#24292E;">console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#6F42C1;">twoSum</span><span style="color:#24292E;">([</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">1</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">2</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">3</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">4</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">4</span><span style="color:#24292E;">], </span><span style="color:#005CC5;">5</span><span style="color:#24292E;">)) </span><span style="color:#6A737D;">// 3</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-a686a8a6 data-v-0b8e2cba><!--[--><!--]--><div class="edit-info" data-v-0b8e2cba><div class="edit-link" data-v-0b8e2cba><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/ZiuChen/ZiuChen.github.io/edit/main/docs/article/【快手】深入理解前端面试题.md" target="_blank" rel="noreferrer" data-v-0b8e2cba><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-0b8e2cba><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 on GitHub<!--]--></a></div><div class="last-updated" data-v-0b8e2cba><p class="VPLastUpdated" data-v-0b8e2cba data-v-a6f11a31>Updated Date: <time datetime="2024-01-06T06:57:39.000Z" data-v-a6f11a31></time></p></div></div><nav class="prev-next" data-v-0b8e2cba><div class="pager" data-v-0b8e2cba><a class="pager-link prev" href="/article/%E3%80%90%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E6%80%BB%E7%BB%93.html" data-v-0b8e2cba><span class="desc" data-v-0b8e2cba>Previous page</span><span class="title" data-v-0b8e2cba>【字节跳动】前端面试题总结</span></a></div><div class="pager" data-v-0b8e2cba><a class="pager-link next" href="/article/%E3%80%90%E7%94%A8%E5%8F%8B%E9%87%91%E8%9E%8D%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E6%80%BB%E7%BB%93.html" data-v-0b8e2cba><span class="desc" data-v-0b8e2cba>Next page</span><span class="title" data-v-0b8e2cba>【用友金融】前端面试题总结</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-9d158fda data-v-2c80950a><div class="container" data-v-2c80950a><p class="message" data-v-2c80950a>Released under the MIT License.</p><p class="copyright" data-v-2c80950a>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"index.md\":\"48a36636\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"13ed773f\",\"article_一文读懂事件冒泡与事件捕获.md\":\"d1929e50\",\"article_深入理解浏览器缓存机制.md\":\"69e6a2c6\",\"article_一文读懂函数中this指向问题.md\":\"28d5e9b4\",\"article_深入javascript数据类型.md\":\"477ee358\",\"note_css.md\":\"fbe56ac3\",\"article_深入理解浏览器运行原理.md\":\"a9684ca4\",\"note_redux.md\":\"02de7bbe\",\"project_smartwordbreak_index.md\":\"66a30ca5\",\"note_javascript.md\":\"45a113ba\",\"article_【快手】深入理解前端面试题.md\":\"d44b9955\",\"article_【字节跳动】前端面试题总结.md\":\"30e03a5f\",\"article_【用友金融】前端面试题总结.md\":\"6d315a97\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"70bae50e\",\"article_一文读懂伪类与伪元素.md\":\"68cce63a\",\"article_从0实现一个年度报告.md\":\"175c992f\",\"article_深入理解proxy与reflect.md\":\"fdad28fc\",\"project_jsrunner_log_index.md\":\"5b2edea9\",\"note_react router.md\":\"8d4994d8\",\"project_clipboardmanager_statement_index.md\":\"158b6468\",\"project_jsrunner_index.md\":\"d62a7429\",\"project_markdown_index.md\":\"5a93c50a\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"dd1797c0\",\"project_clipboardmanager_log_index.md\":\"30d348e4\",\"project_clipboardmanager_index.md\":\"a4052946\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"dd182e72\",\"project_smartwordbreak_log_index.md\":\"6c6fe4e0\",\"project_smartwordbreak_statement_index.md\":\"33bd8d5d\",\"note_mysql.md\":\"45f0f4c7\",\"works_contribution.md\":\"997cb34f\",\"works_opensource.md\":\"db24f357\",\"project_markdown_shortcut_index.md\":\"90359831\",\"project_clipboardmanager_guide_index.md\":\"3c3d400d\",\"project_markdown_log_index.md\":\"bb95b786\",\"note_front-end engineering.md\":\"75c88456\",\"note_ssr.md\":\"ee0ee312\",\"self_index.md\":\"82f653ee\",\"note_react hooks.md\":\"7a05a70a\",\"note_react.md\":\"f9ad4dc2\",\"note_javascriptenhanced.md\":\"f1655783\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZiuChen\",\"description\":\"Unlimited Progress.\",\"base\":\"/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"我的项目\",\"items\":[{\"text\":\"超级剪贴板\",\"link\":\"/project/ClipboardManager/\"},{\"text\":\"超级Markdown\",\"link\":\"/project/Markdown/\"},{\"text\":\"超级JavaScript\",\"link\":\"/project/JSRunner/\"},{\"text\":\"超级分词\",\"link\":\"/project/SmartWordBreak/\"}]},{\"text\":\"开源作品\",\"items\":[{\"text\":\"个人作品\",\"link\":\"/works/opensource\"},{\"text\":\"社区贡献\",\"link\":\"/works/contribution\"}]},{\"text\":\"学习笔记\",\"items\":[{\"text\":\"JavaScript基础\",\"link\":\"/note/JavaScript\"},{\"text\":\"CSS基础\",\"link\":\"/note/CSS\"},{\"text\":\"JavaScript进阶\",\"link\":\"/note/JavaScriptEnhanced\"},{\"text\":\"前端工程化\",\"link\":\"/note/Front-end Engineering\"},{\"text\":\"服务端渲染\",\"link\":\"/note/SSR\"},{\"text\":\"React基础\",\"link\":\"/note/React\"},{\"text\":\"React Hooks\",\"link\":\"/note/React Hooks\"},{\"text\":\"Redux\",\"link\":\"/note/Redux\"},{\"text\":\"React Router\",\"link\":\"/note/React Router\"},{\"text\":\"MySQL\",\"link\":\"/note/MySQL\"}]},{\"text\":\"个人介绍\",\"link\":\"/self/\"}],\"sidebar\":[{\"text\":\"我的项目\",\"items\":[{\"text\":\"超级剪贴板\",\"link\":\"/project/ClipboardManager/\"},{\"text\":\"超级Markdown\",\"link\":\"/project/Markdown/\"},{\"text\":\"超级JavaScript\",\"link\":\"/project/JSRunner/\"},{\"text\":\"超级分词\",\"link\":\"/project/SmartWordBreak/\"}]},{\"text\":\"开源作品\",\"collapsed\":true,\"items\":[{\"text\":\"个人作品\",\"link\":\"/works/opensource\"},{\"text\":\"社区贡献\",\"link\":\"/works/contribution\"}]},{\"text\":\"文章归档\",\"collapsed\":true,\"items\":[{\"text\":\"【2023】青训营 - 前端练习题汇总解析\",\"link\":\"/article/【2023】青训营 - 前端练习题汇总解析\"},{\"text\":\"【字节跳动】前端面试题总结\",\"link\":\"/article/【字节跳动】前端面试题总结\"},{\"text\":\"【快手】深入理解前端面试题\",\"link\":\"/article/【快手】深入理解前端面试题\"},{\"text\":\"【用友金融】前端面试题总结\",\"link\":\"/article/【用友金融】前端面试题总结\"},{\"text\":\"一文读懂事件冒泡与事件捕获\",\"link\":\"/article/一文读懂事件冒泡与事件捕获\"},{\"text\":\"一文读懂伪类与伪元素\",\"link\":\"/article/一文读懂伪类与伪元素\"},{\"text\":\"一文读懂函数中this指向问题\",\"link\":\"/article/一文读懂函数中this指向问题\"},{\"text\":\"从0实现一个年度报告\",\"link\":\"/article/从0实现一个年度报告\"},{\"text\":\"彻底搞懂对象的数据属性描述符、存储属性描述符\",\"link\":\"/article/彻底搞懂对象的数据属性描述符、存储属性描述符\"},{\"text\":\"浅析defineProperty与Proxy实现的双向绑定\",\"link\":\"/article/浅析defineProperty与Proxy实现的双向绑定\"},{\"text\":\"深入JavaScript数据类型\",\"link\":\"/article/深入JavaScript数据类型\"},{\"text\":\"深入Vue3源码，看看Vue.use后究竟发生了什么？\",\"link\":\"/article/深入Vue3源码，看看Vue.use后究竟发生了什么？\"},{\"text\":\"深入理解Proxy与Reflect\",\"link\":\"/article/深入理解Proxy与Reflect\"},{\"text\":\"深入理解浏览器缓存机制\",\"link\":\"/article/深入理解浏览器缓存机制\"},{\"text\":\"深入理解浏览器运行原理\",\"link\":\"/article/深入理解浏览器运行原理\"}]},{\"text\":\"学习笔记\",\"collapsed\":true,\"items\":[{\"text\":\"JavaScript基础\",\"link\":\"/note/JavaScript\"},{\"text\":\"CSS基础\",\"link\":\"/note/CSS\"},{\"text\":\"JavaScript进阶\",\"link\":\"/note/JavaScriptEnhanced\"},{\"text\":\"前端工程化\",\"link\":\"/note/Front-end Engineering\"},{\"text\":\"服务端渲染\",\"link\":\"/note/SSR\"},{\"text\":\"React基础\",\"link\":\"/note/React\"},{\"text\":\"React Hooks\",\"link\":\"/note/React Hooks\"},{\"text\":\"Redux\",\"link\":\"/note/Redux\"},{\"text\":\"React Router\",\"link\":\"/note/React Router\"},{\"text\":\"MySQL\",\"link\":\"/note/MySQL\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/ZiuChen\"},{\"icon\":{\"svg\":\"<svg width=\\\"36\\\" height=\\\"28\\\" viewBox=\\\"0 0 36 28\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"><path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M17.5875 6.77268L21.8232 3.40505L17.5875 0.00748237L17.5837 0L13.3555 3.39757L17.5837 6.76894L17.5875 6.77268ZM17.5863 17.3955H17.59L28.5161 8.77432L25.5526 6.39453L17.59 12.6808H17.5863L17.5825 12.6845L9.61993 6.40201L6.66016 8.78181L17.5825 17.3992L17.5863 17.3955ZM17.5828 23.2891L17.5865 23.2854L32.2133 11.7456L35.1768 14.1254L28.5238 19.3752L17.5865 28L0.284376 14.3574L0 14.1291L2.95977 11.7531L17.5828 23.2891Z\\\" fill=\\\"#1E80FF\\\"/></svg>\"},\"link\":\"https://juejin.cn/user/1887205216238477\"}],\"editLink\":{\"pattern\":\"https://github.com/ZiuChen/ZiuChen.github.io/edit/main/docs/:path\",\"text\":\"Edit this page on GitHub\"},\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2019-present Ziu Chen\"},\"lastUpdatedText\":\"Updated Date\",\"search\":{\"provider\":\"algolia\",\"options\":{\"appId\":\"LFZ2CPWWUG\",\"apiKey\":\"b4fd296ea5e467b3ac4a582160ff3122\",\"indexName\":\"ziuchenio\"}}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink