item1

item2

\n \n\n```\n\n在上述代码中，`.container`是一个 flex 容器，它包含两个子元素`.item1`和`.item2`，并且都将`flex`属性设置为`1`。当调整`.container`的宽度时，`.item1`和`.item2`会等比例地增大或缩小，以占满剩余空间。\n",{"_58":595,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/787/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/787/timeline",{"_58":598,"_60":61,"_62":599,"_64":600,"_66":601,"_68":602,"_70":603,"_72":604,"_74":605,"_76":606,"_78":607,"_111":608,"_131":132,"_133":24,"_134":-5,"_135":611,"_137":612,"_159":152,"_153":614,"_155":614,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":615,"_170":616,"_176":617,"_178":618,"_190":620,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/735","https://api.github.com/repos/pro-collection/interview-question/issues/735/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/735/comments","https://api.github.com/repos/pro-collection/interview-question/issues/735/events","https://github.com/pro-collection/interview-question/issues/735",2279568846,"I_kwDOJGDC6c6H33XO",735,"git pull 和 git fetch 有啥区别？【热度: 355】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[609,610],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":613,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-05-05T14:49:06Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：git pull 和 git fetch\n\n`git pull` 和 `git fetch` 是 Git 版本控制系统中的两个基本命令，它们都用于从远程仓库更新本地仓库的信息，但执行的具体操作不同。\n\n### git fetch\n\n- `git fetch` 下载远程仓库最新的内容到你的本地仓库，但它并不自动合并或修改你当前的工作。它取回了远程仓库的所有分支和标签（tags）。\n- 运行 `git fetch` 后，你可以在需要时手动执行合并操作（使用 `git merge`）或者重新基于远程仓库的内容进行修改。\n\n- `fetch` 只是将远程变更下载到本地的远程分支跟踪副本中，例如 `origin/master`。\n\n### git pull\n\n- `git pull` 实际上是 `git fetch` 操作之后紧跟一个 `git merge` 操作，它会自动拉取远程仓库的新变更，并尝试合并到当前所在的本地分支中。\n\n- 当你使用 `git pull`，Git 会尝试自动合并变更。这可能会引起冲突（conflicts），当然冲突需要手动解决。\n\n- `git pull` 等价于执行了 `git fetch` 和 `git merge FETCH_HEAD` 的组合。\n\n### 使用场景\n\n- 当你仅仅想要查看远程仓库的变动而不立即合并到你的工作，可以使用 `git fetch`。\n\n- 而当你想要立即获取远程的最新变动并快速合并到你的工作中，则可以使用 `git pull`。\n\n**总之，`git pull` 是一个更加「激进」的命令，因为它自动将远程变更合并到你的当前分支，而 `git fetch` 更加「谨慎」，它只下载变更到本地，不做任何合并操作。**\n",{"_58":619,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/735/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/735/timeline",{"_58":622,"_60":61,"_62":623,"_64":624,"_66":625,"_68":626,"_70":627,"_72":628,"_74":629,"_76":630,"_78":631,"_111":632,"_131":132,"_133":24,"_134":-5,"_135":635,"_137":636,"_159":152,"_153":638,"_155":638,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":639,"_170":640,"_176":641,"_178":642,"_190":644,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/734","https://api.github.com/repos/pro-collection/interview-question/issues/734/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/734/comments","https://api.github.com/repos/pro-collection/interview-question/issues/734/events","https://github.com/pro-collection/interview-question/issues/734",2279568153,"I_kwDOJGDC6c6H33MZ",734,"站点如何防止爬虫？【热度: 554】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[633,634],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":637,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-05-05T14:47:30Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：反爬虫\n\n站点防止爬虫通常涉及一系列技术和策略的组合。以下是一些常用的方法：\n\n### 1. 修改 `robots.txt`\n\n在站点的根目录下创建或修改 `robots.txt` 文件，用来告知遵守该协议的爬虫应该爬取哪些页面，哪些不应该爬取。例如：\n\n```txt\nUser-agent: *\nDisallow: /\n```\n\n然而，需要注意的是遵守 `robots.txt` 不是强制性的，恶意爬虫可以忽视这些规则。\n\n### 2. 使用 CAPTCHA\n\n对于表单提交、登录页面等，使用验证码（CAPTCHA）可以防止自动化脚本或机器人执行操作。\n\n### 3. 检查用户代理字符串\n\n服务器可以根据请求的用户代理（User-Agent）字符串来决定是否屏蔽某些爬虫。但用户代理字符串可以伪造，所以这不是一个完全可靠的方法。\n\n### 4. 分析流量行为\n\n分析访问者的行为，比如访问频率、访问页数、访问时长，并与正常用户的行为进行对比，从而尝试检测和屏蔽爬虫。\n\n### 5. 使用 Web 应用防火墙（WAF）\n\n许多 Web 应用防火墙提供自动化的爬虫和机器人检测功能，可以帮助防止爬虫。\n\n### 6. 服务端渲染和动态 Token\n\n一些网站使用 JavaScript 服务端渲染，或将关键内容（比如令牌）动态地插入到页面中，这可以使得非浏览器的自动化工具获取网站内容变得更加困难。\n\n### 7. 添加额外的 HTTP 头\n\n一些站点要求每个请求都包括特定的 HTTP 头，这些头信息不是常规爬虫会添加的，而是通过 JavaScript 动态添加的。\n\n### 8. IP 黑名单\n\n如果探测到某个 IP 地址的不正常行为，就可以将该 IP 地址加入黑名单，阻止其进一步的访问。\n\n### 9. 限制访问速度\n\n通过限制特定时间内允许的请求次数来禁止爬虫执行大量快速的页面抓取。\n\n### 10. API 限流\n\n对 API 使用率进行限制，比如基于用户、IP 地址等实施限速和配额。\n\n### 11. 使用 HTTPS\n\n使用 HTTPS 加密您的网站，这可以避免中间人攻击，并增加爬虫的抓取难度。\n\n### 12. 更改网站结构和内容\n\n定期更改网站的 URL 结构、内容排版等，使得爬虫开发人员需要不断更新爬虫程序来跟进网站的改动。\n",{"_58":643,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/734/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/734/timeline",{"_58":646,"_60":61,"_62":647,"_64":648,"_66":649,"_68":650,"_70":651,"_72":652,"_74":653,"_76":654,"_78":655,"_111":656,"_131":132,"_133":24,"_134":-5,"_135":665,"_137":666,"_159":152,"_153":668,"_155":668,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":669,"_170":670,"_176":671,"_178":672,"_190":674,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/733","https://api.github.com/repos/pro-collection/interview-question/issues/733/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/733/comments","https://api.github.com/repos/pro-collection/interview-question/issues/733/events","https://github.com/pro-collection/interview-question/issues/733",2279564151,"I_kwDOJGDC6c6H32N3",733,"什么是DNS劫持？【热度: 165】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[657,664],{"_70":658,"_72":659,"_58":660,"_117":661,"_119":662,"_121":24,"_122":663},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","网络","1A8829","web 网络相关",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":667,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-05-05T14:38:33Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：DNS劫持\n\nDNS 劫持（DNS Hijacking），也称为 DNS 重定向，是一种通过篡改原本的 DNS 解析流程，使得用户在尝试访问特定网址时被非法重定向到其他（通常是恶意的、广告相关的或者钓鱼的）网站的行为。这种攻击可以发生在用户的个人电脑、网络设备、甚至是直接在 DNS 服务器上。\n\nDNS 劫持可以通过以下几种方式实现：\n\n1. **恶意软件**：\n\n - 用户的计算机被感染了恶意软件，该软件修改了本地的 DNS 设置，例如更改本地的 `hosts` 文件或 DNS 配置，使得所有或特定域名的请求都会被发送到攻击者指定的服务器。\n\n2. **篡改路由器设置**：\n\n - 攻击者通过各种手段（如默认密码、漏洞利用等）获取路由器的管理权限，并修改其上的 DNS 服务器设置，使得连接到该路由器的所有设备的 DNS 请求都会被重定向。\n\n3. **DNS 服务器劫持**：\n\n - 攻击者直接对 DNS 服务器进行攻击，将规范域名的正确解析地址更改为恶意地址。\n\n4. **中间人攻击（Man-in-the-Middle Attack, MiTM）**：\n\n - 在用户与 DNS 服务器之间截获和修改 DNS 查询和响应，将用户请求重定向到另一个服务器。\n\n5. **网络服务提供商干预**：\n - 部分网络服务商出于广告和监管的目的，可能会在 DNS 层面上进行重定向，将无效域名或特定关键字的域名请求导向他们自己的服务器。\n\nDNS 劫持对用户的主要威胁是隐私泄露和安全风险，用户有可能无意中访问到含有恶意软件的网页，导致个人信息泄露或者计算机安全受到威胁。为了防范 DNS 劫持，用户可以采取以下措施：\n\n- 使用可信赖的 DNS 服务，如 Google 的 8.8.8.8、Cloudflare 的 1.1.1.1 等。\n- 保持操作系统和防病毒软件都更新至最新状态， regularly scan for malware。\n- 对家用路由器设置复杂的登录密码，并定期进行固件更新。\n- 使用 VPN 服务，在密封的隧道中完成所有网络通信。\n- 对于重要的网站，最好使用书签直接访问，防止输入错误的 URL。\n- 启用 DNSSEC（Domain Name System Security Extensions），增加额外的验证步骤来保证 DNS 查询的安全。\n",{"_58":673,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/733/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/733/timeline",{"_58":676,"_60":61,"_62":677,"_64":678,"_66":679,"_68":680,"_70":681,"_72":682,"_74":683,"_76":684,"_78":685,"_111":686,"_131":132,"_133":24,"_134":-5,"_135":695,"_137":696,"_159":152,"_153":698,"_155":699,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":700,"_170":701,"_176":702,"_178":703,"_190":705,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/726","https://api.github.com/repos/pro-collection/interview-question/issues/726/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/726/comments","https://api.github.com/repos/pro-collection/interview-question/issues/726/events","https://github.com/pro-collection/interview-question/issues/726",2254474886,"I_kwDOJGDC6c6GYI6G",726,"[React] 介绍一下 HOC【热度: 789】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[687,694],{"_70":688,"_72":689,"_58":690,"_117":691,"_119":692,"_121":24,"_122":693},5252532904,"LA_kwDOJGDC6c8AAAABORNKqA","https://api.github.com/repos/pro-collection/interview-question/labels/web%E6%A1%86%E6%9E%B6","web框架","CB446E","web 框架相关知识",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":272,"_68":273,"_62":274,"_70":275,"_72":276,"_74":277,"_76":278,"_122":279,"_147":697,"_149":281,"_151":152,"_131":132,"_153":282,"_155":283,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-04-20T09:40:00Z","2024-05-10T14:15:37Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：React HOC\r\n\r\nReact 中的 HOC（高阶组件，Higher-Order Components）是一种基于 React 的组合特性而形成的设计模式，用于重用组件逻辑。一个高阶组件是一个函数，它接受一个组件并返回一个新组件。\r\n\r\nHOC 允许你为组件添加额外的功能而无需更改组件自身的实现。这种模式可以帮助你在 React 应用程序中保持 DRY（不重复你自己），并且可以提升组件的可测试性和可维护性。\r\n\r\n### HOC 的使用场景包括：\r\n\r\n1. **代码复用、逻辑和引导抽象：** 可以将共享逻辑提取到 HOC 中，让不同的组件能够重用这段逻辑。\r\n2. **渲染劫持：** 在 HOC 中可以修改传入组件的 JSX 结构。\r\n3. **状态抽象和操作：** 可以将内部状态和相关方法从组件中抽离出来。\r\n4. **Props 代理：** 通过 HOC 可以添加、编辑或删除传入组件的 props。\r\n\r\n### HOC 的定义方式：\r\n\r\n```jsx\r\nfunction withSubscription(WrappedComponent, selectData) {\r\n // 返回一个 class 组件\r\n return class extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.handleChange = this.handleChange.bind(this);\r\n this.state = {\r\n data: selectData(DataSource, props)\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n // ...负责订阅相关的操作...\r\n }\r\n\r\n componentWillUnmount() {\r\n // ...取消订阅...\r\n }\r\n\r\n handleChange() {\r\n this.setState({\r\n data: selectData(DataSource, this.props)\r\n });\r\n }\r\n\r\n render() {\r\n // ... 并使用新数据渲染被包装的组件!\r\n // 请注意，我们可能还会传递其他属性\r\n return ;\r\n }\r\n };\r\n}\r\n```\r\n\r\n在这个例子中，`withSubscription` 是一个 HOC。它接受一个组件 `WrappedComponent` 和一个函数 `selectData` 作为参数，这个函数用于从数据源中选择需要的数据。返回一个新的组件，这个新组件通过 `state` 管理数据，并在挂载后订阅数据源，在卸载前取消订阅，并且在数据改变时通过 `setState` 更新数据。\r\n\r\n### 注意事项：\r\n\r\n- HOC 不应该修改传入的组件，而是使用组合的方式将其包裹起来。\r\n- 传递不相关的 props 至被包裹的组件，可能会导致属性冲突。\r\n- HOC 应该传递不与高阶组件相关的 props 至被包裹的组件，这有助于保持组件的纯净和可复用性。\r\n- 对于 HOC，通常需要注意不要在 render 方法中创建 HOC，因为这会导致组件的不必要的重新挂载。\r\n\r\n总而言之，HOC 是 React 中一个非常有用的模式，允许开发者以声明方式抽象组件逻辑，提高组件复用。\r\n",{"_58":704,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/726/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/726/timeline",{"_58":707,"_60":61,"_62":708,"_64":709,"_66":710,"_68":711,"_70":712,"_72":713,"_74":714,"_76":715,"_78":716,"_111":717,"_131":132,"_133":24,"_134":-5,"_135":726,"_137":727,"_159":152,"_153":729,"_155":730,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":731,"_170":732,"_176":733,"_178":734,"_190":736,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/724","https://api.github.com/repos/pro-collection/interview-question/issues/724/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/724/comments","https://api.github.com/repos/pro-collection/interview-question/issues/724/events","https://github.com/pro-collection/interview-question/issues/724",2254463388,"I_kwDOJGDC6c6GYGGc",724,"扁平数据通过 parent 关联, 实现扁平结构转嵌套 tree 结构【热度: 218】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[718,719],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":720,"_72":721,"_58":722,"_117":723,"_119":724,"_121":24,"_122":725},5931045040,"LA_kwDOJGDC6c8AAAABYYSQsA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0/%E7%AE%97%E6%B3%95","代码实现/算法","1d76db","代码实现或者算法实现",[],{"_58":272,"_68":273,"_62":274,"_70":275,"_72":276,"_74":277,"_76":278,"_122":279,"_147":728,"_149":281,"_151":152,"_131":132,"_153":282,"_155":283,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-04-20T09:07:22Z","2024-04-20T09:07:23Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：扁平结构转嵌套结构\n\n**题目**\n\n```\n数据输入：\n[\n { \"name\": \"数据1\", \"parent\": null, \"id\": 1 },\n { \"name\": \"数据2\", \"id\": 2, \"parent\": 1 },\n { \"name\": \"数据3\", \"parent\": 2, \"id\": 3 },\n { \"name\": \"数据4\", \"parent\": 3, \"id\": 4 },\n { \"name\": \"数据5\", \"parent\": 4, \"id\": 5 },\n { \"name\": \"数据6\", \"parent\": 2, \"id\": 6 }\n]\n\n数据输出：\n[\n {\n \"name\": \"数据1\",\n \"parent\": null,\n \"id\": 1,\n \"children\": [\n {\n \"name\": \"数据2\",\n \"id\": 2,\n \"parent\": 1,\n \"children\": [\n {\n \"name\": \"数据3\",\n \"parent\": 2,\n \"id\": 3,\n \"children\": [\n {\n \"name\": \"数据4\",\n \"parent\": 3,\n \"id\": 4,\n \"children\": [\n {\n \"name\": \"数据5\",\n \"parent\": 4,\n \"id\": 5,\n \"children\": []\n }\n ]\n }\n ]\n },\n {\n \"name\": \"数据6\",\n \"parent\": 2,\n \"id\": 6,\n \"children\": []\n }\n ]\n }\n ]\n }\n]\n```\n\n**解**\n\n解法非常有意思，自己好好体会\n\n```js\nfunction listToTree(list) {\n const map = {},\n roots = [];\n\n // 首先将每个节点按照 id 存入 map\n for (const item of list) {\n map[item.id] = { ...item, children: [] };\n }\n\n for (const item of list) {\n if (item.parent === null) {\n // 顶级节点\n roots.push(map[item.id]);\n } else if (map[item.parent]) {\n // 非顶级节点，找到父节点并添加到其 children 数组中\n map[item.parent].children.push(map[item.id]);\n }\n }\n\n return roots;\n}\n\nconst tree = listToTree(list);\n```\n",{"_58":735,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/724/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/724/timeline",{"_58":738,"_60":61,"_62":739,"_64":740,"_66":741,"_68":742,"_70":743,"_72":744,"_74":745,"_76":746,"_78":747,"_111":748,"_131":132,"_133":24,"_134":-5,"_135":751,"_137":752,"_159":152,"_153":754,"_155":754,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":755,"_170":756,"_176":757,"_178":758,"_190":760,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/723","https://api.github.com/repos/pro-collection/interview-question/issues/723/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/723/comments","https://api.github.com/repos/pro-collection/interview-question/issues/723/events","https://github.com/pro-collection/interview-question/issues/723",2254461151,"I_kwDOJGDC6c6GYFjf",723,"树结构查找，实现一个函数，通过 id 来查找 tree 数据结构对应的节点【热度: 867】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[749,750],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":720,"_72":721,"_58":722,"_117":723,"_119":724,"_121":24,"_122":725},[],{"_58":272,"_68":273,"_62":274,"_70":275,"_72":276,"_74":277,"_76":278,"_122":279,"_147":753,"_149":281,"_151":152,"_131":132,"_153":282,"_155":283,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-04-20T09:01:01Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：树结构查找\n\n树结构查找，实现一个函数，通过 id 来查找 tree 数据结构对应的节点\n\n**题目如下**\n\n```js\n// 数据如下：\nconst tree = [\n {\n name: \"数据1\",\n id: 1,\n children: [\n {\n name: \"数据2\",\n id: 2,\n children: [\n {\n name: \"数据3\",\n id: 3,\n children:\n {\n name: \"数据4\",\n id: 4,\n children: [],\n },\n ],\n },\n ],\n },\n ],\n },\n];\n\nfunction findNodeById(tree, id) {\n // ....\n}\n\nconst res = findNodeById(tree, 3);\n// res 的结果为\n// {\n// name: \"数据3\",\n// id: 3,\n// children: [\n// {\n// name: \"数据4\",\n// id: 4,\n// children: [],\n// },\n// ],\n// }\n```\n\n**实现**\n\n```js\nfunction findNodeById(tree, id) {\n if (!tree.length) return null; // 如果树是空的，则返回 null\n\n const search = (node) => {\n if (node.id === id) {\n // 如果找到一个匹配的节点，返回它\n return node;\n } else if (node.children) {\n // 否则，如果它有子节点，递归地搜索子节点\n for (const child of node.children) {\n const result = search(child);\n if (result) {\n return result; // 如果递归找到了一个匹配的节点，返回它\n }\n }\n }\n return null; // 如果什么都没找到，返回 null\n };\n\n for (const root of tree) {\n const result = search(root);\n if (result) {\n return result; // 如果在根节点中找到了一个匹配的节点，返回它\n }\n }\n\n // 如果循环遍历整个树完成后没有找到，返回 null\n return null;\n}\n\n// 使用\nconst foundNode = findNodeById(tree, 3);\nconsole.log(foundNode); // 将打印出 id 为 3 的节点\n```\n",{"_58":759,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/723/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/723/timeline",{"_58":762,"_60":61,"_62":763,"_64":764,"_66":765,"_68":766,"_70":767,"_72":768,"_74":769,"_76":770,"_78":771,"_111":772,"_131":132,"_133":24,"_134":-5,"_135":780,"_137":781,"_159":152,"_153":783,"_155":783,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":784,"_170":785,"_176":786,"_178":787,"_190":789,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/709","https://api.github.com/repos/pro-collection/interview-question/issues/709/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/709/comments","https://api.github.com/repos/pro-collection/interview-question/issues/709/events","https://github.com/pro-collection/interview-question/issues/709",2254321588,"I_kwDOJGDC6c6GXje0",709,"Husky 和 lint-staged 有什么区别？【热度: 387】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[773,779],{"_70":774,"_72":775,"_58":776,"_117":777,"_119":724,"_121":24,"_122":778},5284642729,"LA_kwDOJGDC6c8AAAABOv0_qQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B7%A5%E7%A8%8B%E5%8C%96","工程化","web 项目工程化",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":272,"_68":273,"_62":274,"_70":275,"_72":276,"_74":277,"_76":278,"_122":279,"_147":782,"_149":281,"_151":152,"_131":132,"_153":282,"_155":283,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-04-20T02:00:00Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：Husky 和 lint-staged、git hooks\n\nHusky 和 lint-staged 都是与 Git 钩子 (hooks) 配合使用的 Node.js 库，但它们的用途和工作方式有所不同：\n\n1. **Husky**：\n\n - Husky 是一个 Git 钩子管理器，它允许你触发自定义脚本在 git 事件发生时运行，如 `pre-commit`, `pre-push`, `post-merge` 等。\n - 它的主要目的是自动化你的版本控制工作流程，例如在提交 (commit) 前运行代码检查、格式化代码或执行测试，以确保代码库的质量和一致性。\n\n2. **lint-staged**：\n - lint-staged 是一个运行在 Husky 钩子之上的工具，它专门用于对暂存区 (staged) 文件的检查。\n - 当你运行 `git commit` 并且 Husky 触发 `pre-commit` 钩子时，lint-staged 会检查你即将提交的代码（即 `git add` 后的文件列表），并运行你配置好的检查脚本，如代码格式化程序、linter 或其他工具。\n - 它的目的是确保在提交之前，只有没有检查错误的代码会被提交。\n\n简而言之，Husky 是一个可以触发多种钩子事件的工具，而 lint-staged 是一种专门用于检查 Git 暂存区文件的工具。它们通常是配合使用的，因为 lint-staged 需要通过 Husky 来触发钩子。在你初始化项目并配置 CI/CD 流程时，通常会同时用到它们。\n",{"_58":788,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/709/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/709/timeline",{"_58":791,"_60":61,"_62":792,"_64":793,"_66":794,"_68":795,"_70":796,"_72":797,"_74":798,"_76":799,"_78":800,"_111":801,"_131":132,"_133":24,"_134":-5,"_135":804,"_137":805,"_159":152,"_153":807,"_155":808,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":809,"_170":810,"_176":811,"_178":812,"_190":814,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/679","https://api.github.com/repos/pro-collection/interview-question/issues/679/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/679/comments","https://api.github.com/repos/pro-collection/interview-question/issues/679/events","https://github.com/pro-collection/interview-question/issues/679",2229683676,"I_kwDOJGDC6c6E5kXc",679,"如何检测网页空闲状态(一定时间内无操作)【热度: 329】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[802,803],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":806,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-04-07T10:27:39Z","2024-04-15T14:55:47Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### 如何判断页面是否空闲\r\n\r\n首先，我们要知道什么是空闲？用户一定时间内，没有对网页进行任何操作，则当前网页为空闲状态。\r\n\r\n用户操作网页，无非就是通过`鼠标`、`键盘`两个输入设备(暂不考虑手柄等设备)。因而我们可以监听相应的输入事件，来判断网页是否空闲(用户是否有操作网页)。\r\n\r\n1. 监听鼠标移动事件`mousemove`；\r\n2. 监听键盘按下事件`mousedown`；\r\n3. 在用户进入网页后，设置延时跳转，如果触发以上事件，则移除延时器，并重新开始。\r\n\r\n### 网页空闲检测实现\r\n\r\n实现点：\r\n1. 需要使用防抖方式实现，避免性能问题\r\n2. 监听`visibilitychange`事件，在页面隐藏时移除延时器，然后页面显示时继续计时，从而解决这个问题。\r\n\r\n实现：\r\n```js\r\n/**\r\n * 网页空闲检测\r\n * @param {() => void} callback 空闲时执行，即一定时长无操作时触发\r\n * @param {number} [timeout=15] 时长，默认15s，单位：秒\r\n * @param {boolean} [immediate=false] 是否立即开始，默认 false\r\n * @returns\r\n */\r\nconst onIdleDetection = (callback, timeout = 15, immediate = false) => {\r\n let pageTimer;\r\n let beginTime = 0;\r\n const onClearTimer = () => {\r\n pageTimer && clearTimeout(pageTimer);\r\n pageTimer = undefined;\r\n };\r\n const onStartTimer = () => {\r\n const currentTime = Date.now();\r\n if (pageTimer && currentTime - beginTime < 100) {\r\n return;\r\n }\r\n\r\n onClearTimer();\r\n beginTime = currentTime;\r\n pageTimer = setTimeout(() => {\r\n callback();\r\n }, timeout * 1000);\r\n };\r\n\r\n const onPageVisibility = () => {\r\n // 页面显示状态改变时，移除延时器\r\n onClearTimer();\r\n\r\n if (document.visibilityState === 'visible') {\r\n const currentTime = Date.now();\r\n // 页面显示时，计算时间，如果超出限制时间则直接执行回调函数\r\n if (currentTime - beginTime >= timeout * 1000) {\r\n callback();\r\n return;\r\n }\r\n // 继续计时\r\n pageTimer = setTimeout(() => {\r\n callback();\r\n }, timeout * 1000 - (currentTime - beginTime));\r\n }\r\n };\r\n\r\n const startDetection = () => {\r\n onStartTimer();\r\n document.addEventListener('mousedown', onStartTimer);\r\n document.addEventListener('mousemove', onStartTimer);\r\n document.addEventListener('visibilitychange', onPageVisibility);\r\n };\r\n\r\n const stopDetection = () => {\r\n onClearTimer();\r\n document.removeEventListener('mousedown', onStartTimer);\r\n document.removeEventListener('mousemove', onStartTimer);\r\n document.removeEventListener('visibilitychange', onPageVisibility);\r\n };\r\n\r\n const restartDetection = () => {\r\n onClearTimer();\r\n onStartTimer();\r\n };\r\n\r\n if (immediate) {\r\n startDetection();\r\n }\r\n\r\n return {\r\n startDetection,\r\n stopDetection,\r\n restartDetection\r\n };\r\n};\r\n```\r\n\r\n### 扩展\r\nchrome浏览器其实提供了一个`Idle Detection`API，来实现网页空闲状态的检测，但是这个API还是一个实验性特性，并且Firefox与Safari不支持。\r\n\r\n### 参考文档\r\n- https://juejin.cn/post/7344670957405405223",{"_58":813,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/679/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/679/timeline",{"_58":816,"_60":61,"_62":817,"_64":818,"_66":819,"_68":820,"_70":821,"_72":822,"_74":823,"_76":824,"_78":825,"_111":826,"_131":132,"_133":24,"_134":-5,"_135":829,"_137":830,"_159":152,"_153":832,"_155":833,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":834,"_170":835,"_176":836,"_178":837,"_190":839,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/550","https://api.github.com/repos/pro-collection/interview-question/issues/550/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/550/comments","https://api.github.com/repos/pro-collection/interview-question/issues/550/events","https://github.com/pro-collection/interview-question/issues/550",1884284920,"I_kwDOJGDC6c5wT-f4",550,"[代码实现] JS 中如何实现大对象深度对比【热度: 906】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[827,828],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":720,"_72":721,"_58":722,"_117":723,"_119":724,"_121":24,"_122":725},[],{"_58":272,"_68":273,"_62":274,"_70":275,"_72":276,"_74":277,"_76":278,"_122":279,"_147":831,"_149":281,"_151":152,"_131":132,"_153":282,"_155":283,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-09-06T15:39:53Z","2023-09-06T15:51:26Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：JS对象对比\n\n在JavaScript中，可以使用递归的方式实现大对象的深度对比。以下是一个示例函数，用于比较两个大对象的每个属性是否相等：\n\n```javascript\nfunction deepEqual(obj1, obj2) {\n // 检查类型是否相同\n if (typeof obj1 !== typeof obj2) {\n return false;\n }\n \n // 检查是否是对象或数组\n if (typeof obj1 === 'object' && obj1 !== null && obj2 !== null) {\n // 检查对象或数组长度是否相同\n if (Object.keys(obj1).length !== Object.keys(obj2).length) {\n return false;\n }\n \n for (let key in obj1) {\n // 递归比较每个属性的值\n if (!deepEqual(obj1[key], obj2[key])) {\n return false;\n }\n }\n \n return true;\n }\n \n // 比较基本类型的值\n return obj1 === obj2;\n}\n```\n\n使用示例：\n\n```javascript\nconst obj1 = {\n name: 'John',\n age: 30,\n address: {\n street: '123 Main St',\n city: 'New York'\n }\n};\n\nconst obj2 = {\n name: 'John',\n age: 30,\n address: {\n street: '123 Main St',\n city: 'New York'\n }\n};\n\nconst obj3 = {\n name: 'Jane',\n age: 25,\n address: {\n street: '456 Park Ave',\n city: 'Los Angeles'\n }\n};\n\nconsole.log(deepEqual(obj1, obj2)); // true\nconsole.log(deepEqual(obj1, obj3)); // false\n```\n\n在上述示例中，`deepEqual`函数会递归比较两个对象的每个属性的值，包括嵌套的对象或数组。如果两个对象是相等的，则返回`true`，否则返回`false`。注意，该函数不会检查函数、正则表达式、日期等复杂类型的值。\n",{"_58":838,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/550/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/550/timeline",{"_58":841,"_60":61,"_62":842,"_64":843,"_66":844,"_68":845,"_70":846,"_72":847,"_74":848,"_76":849,"_78":850,"_111":851,"_131":132,"_133":24,"_134":-5,"_135":854,"_137":855,"_159":152,"_153":857,"_155":858,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":859,"_170":860,"_176":861,"_178":862,"_190":864,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/541","https://api.github.com/repos/pro-collection/interview-question/issues/541/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/541/comments","https://api.github.com/repos/pro-collection/interview-question/issues/541/events","https://github.com/pro-collection/interview-question/issues/541",1875808123,"I_kwDOJGDC6c5vzo97",541,"副作用是什么概念【热度: 230】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[852,853],{"_70":304,"_72":305,"_58":306,"_117":307,"_119":308,"_121":24,"_122":309},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":272,"_68":273,"_62":274,"_70":275,"_72":276,"_74":277,"_76":278,"_122":279,"_147":856,"_149":281,"_151":152,"_131":132,"_153":282,"_155":283,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-08-31T15:51:14Z","2023-08-31T15:51:15Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：js副作用\n\n在 JavaScript 中，`副作用（side effect）`是指函数或表达式在执行过程中对外部环境产生的影响，而不仅仅是返回一个值。副作用可能包括但不限于对全局变量、参数、数据结构、文件系统、网络请求等进行修改。\n\n副作用可以是有意为之，也可以是无意之间发生的。在函数式编程中，减少副作用是一种被推崇的编程风格，因为副作用使得代码的行为更难以跟踪和理解，容易引发不可预见的 bug。尽可能减少副作用有助于代码更加可靠、可测试和易于维护。\n\n以下是一些常见的 JavaScript 中可能产生副作用的操作：\n\n1. **修改全局变量**：直接对全局变量进行赋值或修改会导致副作用。\n2. **修改函数参数**：修改传入函数的参数值也会引起副作用。\n3. **`I/O` 操作**：与文件系统、网络请求等进行交互时，可能会对外部环境产生副作用。\n4. **修改数据结构**：对数组、对象等数据结构进行添加、删除或修改操作会改变它们的状态，也属于副作用。\n\n在函数式编程中，函数应该尽量避免产生副作用，而是通过纯函数的方式，根据输入返回一个确定的输出，不修改外部环境的状态。\n这样可以提高代码的可测试性、可复用性和可维护性。\n",{"_58":863,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/541/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/541/timeline",{"_58":866,"_60":61,"_62":867,"_64":868,"_66":869,"_68":870,"_70":871,"_72":872,"_74":873,"_76":874,"_78":875,"_111":876,"_131":132,"_133":24,"_134":-5,"_135":879,"_137":880,"_159":152,"_153":882,"_155":882,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":883,"_170":884,"_176":885,"_178":886,"_190":888,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/531","https://api.github.com/repos/pro-collection/interview-question/issues/531/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/531/comments","https://api.github.com/repos/pro-collection/interview-question/issues/531/events","https://github.com/pro-collection/interview-question/issues/531",1867182204,"I_kwDOJGDC6c5vSvB8",531,"Http 状态码 301 和 302 的应用场景分别是什么",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[877,878],{"_70":658,"_72":659,"_58":660,"_117":661,"_119":662,"_121":24,"_122":663},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":272,"_68":273,"_62":274,"_70":275,"_72":276,"_74":277,"_76":278,"_122":279,"_147":881,"_149":281,"_151":152,"_131":132,"_153":282,"_155":283,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-08-25T14:42:25Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"HTTP状态码301和302都是重定向状态码，用于将客户端请求重定向到另一个URL。\n\n- `301（Moved Permanently）`：表示请求的资源已永久移动到新位置。服务器发送301状态码时，还会在响应头中包含一个Location字段，指示新的资源位置。客户端接收到301响应后，会自动重定向到新的URL，并且搜索引擎也会更新索引将原来的URL替换为新的URL。301常见的应用场景包括网站改版、域名更换等需要永久重定向的情况。\n\n- `302（Found）`：表示请求的资源临时移动到不同的位置。与301不同，302状态码表示请求的资源只是暂时移动，将来可能还会回到原来的位置。服务器发送302状态码时，同样会在响应头中包含一个Location字段，指示暂时移动的位置。客户端接收到302响应后，也会自动重定向到新的URL，但搜索引擎通常不会更新索引，而是继续保留原来的URL。302常见的应用场景包括临时的维护页面、流量调度等需要临时重定向的情况。\n\n**总结**\n\n- HTTP状态码301是永久重定向，表示请求的资源已永久移动到新位置，客户端会自动重定向到新的URL，搜索引擎会更新索引。\n- HTTP状态码302是临时重定向，表示请求的资源暂时移动到不同的位置，客户端会自动重定向到新的URL，但搜索引擎会保留原来的索引。\n- 301适用于网站改版、域名更换等需要永久重定向的情况。\n- 302适用于临时的维护页面、流量调度等需要临时重定向的情况。\n\n",{"_58":887,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/531/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/531/timeline",{"_58":890,"_60":61,"_62":891,"_64":892,"_66":893,"_68":894,"_70":895,"_72":896,"_74":897,"_76":898,"_78":899,"_111":900,"_131":132,"_133":24,"_134":-5,"_135":903,"_137":904,"_159":152,"_153":906,"_155":907,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":908,"_170":909,"_176":910,"_178":911,"_190":913,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/530","https://api.github.com/repos/pro-collection/interview-question/issues/530/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/530/comments","https://api.github.com/repos/pro-collection/interview-question/issues/530/events","https://github.com/pro-collection/interview-question/issues/530",1867164707,"I_kwDOJGDC6c5vSqwj",530,"http 常见状态码有哪些【热度: 1,410】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[901,902],{"_70":658,"_72":659,"_58":660,"_117":661,"_119":662,"_121":24,"_122":663},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":272,"_68":273,"_62":274,"_70":275,"_72":276,"_74":277,"_76":278,"_122":279,"_147":905,"_149":281,"_151":152,"_131":132,"_153":282,"_155":283,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-08-25T14:30:59Z","2023-08-25T14:31:00Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：http常见状态码\n\nHTTP（超文本传输协议）中常见的状态码包括：\n\n1xx（信息性状态码）：表示请求已被接收并正在处理。\n\n- 100（Continue）：请求已接收，客户端应继续发送请求的剩余部分。\n- 101（Switching Protocols）：服务器要求客户端切换协议。\n\n2xx（成功状态码）：表示请求已成功处理。\n\n- 200（OK）：请求成功。\n- 201（Created）：请求已成功并创建新的资源。\n- 202（Accepted）：请求已接受，但尚未处理完成。\n- 204（No Content）：服务器已成功处理请求，但无返回内容。\n\n3xx（重定向状态码）：表示需要进一步操作才能完成请求。\n\n- 301（Moved Permanently）：请求的资源已永久移动到新位置。\n- 302（Found）：请求的资源临时移动到不同的位置。\n- 304（Not Modified）：资源未被修改，可使用缓存版本。\n\n4xx（客户端错误状态码）：表示客户端发生错误。\n\n- 400（Bad Request）：无效的请求。\n- 401（Unauthorized）：请求需要身份验证或凭证无效。\n- 403（Forbidden）：服务器拒绝请求。\n- 404（Not Found）：请求的资源不存在。\n\n5xx（服务器错误状态码）：表示服务器发生错误。\n\n- 500（Internal Server Error）：服务器遇到了错误，无法完成请求。\n- 502（Bad Gateway）：服务器作为网关或代理，从上游服务器收到无效响应。\n- 503（Service Unavailable）：服务器无法处理请求，通常是因为过载或停机维护。\n\n以上是常见的 HTTP 状态码，每个状态码都有特定的含义，用于指示请求的处理结果。\n",{"_58":912,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/530/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/530/timeline",{"_58":915,"_60":61,"_62":916,"_64":917,"_66":918,"_68":919,"_70":920,"_72":921,"_74":922,"_76":923,"_78":924,"_111":925,"_131":132,"_133":24,"_134":-5,"_135":928,"_137":929,"_159":195,"_153":931,"_155":932,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":933,"_170":934,"_176":935,"_178":936,"_190":938,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/519","https://api.github.com/repos/pro-collection/interview-question/issues/519/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/519/comments","https://api.github.com/repos/pro-collection/interview-question/issues/519/events","https://github.com/pro-collection/interview-question/issues/519",1858134518,"I_kwDOJGDC6c5uwOH2",519,"[代码执行] 关于 this 的指向问题：下面代码执行结果是什么, 原因？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[926,927],{"_70":304,"_72":305,"_58":306,"_117":307,"_119":308,"_121":24,"_122":309},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":272,"_68":273,"_62":274,"_70":275,"_72":276,"_74":277,"_76":278,"_122":279,"_147":930,"_149":281,"_151":152,"_131":132,"_153":282,"_155":283,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-08-20T13:58:32Z","2023-08-20T14:15:34Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"代码如下，请问执行结果是多少？\r\n```ts\r\nlet obj = {\r\n name: \"yanle\",\r\n age: 20,\r\n getName: () => {\r\n const _getName = () => {\r\n console.log(\"this.getName\", this.name);\r\n };\r\n _getName();\r\n },\r\n getAge: function() {\r\n const _getAge = () => {\r\n console.log(\"this.getAge\", this.age);\r\n };\r\n _getAge();\r\n },\r\n extend: {\r\n name: \"le\",\r\n age: 20,\r\n getName: function() {\r\n console.log(\"name: \", this.name);\r\n },\r\n getAge: () => {\r\n console.log(\"age: \", this.age);\r\n },\r\n },\r\n};\r\n\r\nobj.getName();\r\nobj.getAge();\r\n\r\nobj.extend.getName();\r\nobj.extend.getAge();\r\n\r\nobj.extend.getName.bind(obj)();\r\nobj.extend.getAge.bind(obj)();\r\n```\r\n\r\n**执行结果**\r\n```shell\r\nthis.getName undefined\r\nthis.getAge 20\r\nname: le\r\nage: undefined\r\nname: yanle\r\nage: undefined\r\n```\r\n\r\n解释如下：\r\n\r\n- `obj.getName()`：在箭头函数getName中，this指向的是全局对象（在浏览器中是window对象，Node.js 中是Global对象）。因此this.getName输出undefined。\r\n- `obj.getAge()`：在普通函数getAge中，this指向的是obj对象。因此this.getAge输出20。\r\n- `obj.extend.getName()`：在普通函数getName中，this指向的是obj.extend对象。因此this.name输出le。\r\n- `obj.extend.getAge()`：在箭头函数getAge中，this指向的是全局对象（在浏览器中是window对象，Node.js 中是Global对象）。因此this.age输出undefined。\r\n- `obj.extend.getName.bind(obj)()`：通过bind方法将getName函数绑定到obj对象上，并立即调用绑定后的函数。在绑定后调用时，this指向的是obj对象。因此this.name输出yanle。\r\n- `obj.extend.getAge.bind(obj)()`：在箭头函数 getAge 中，this 是在函数定义时绑定的，而不是在函数调用时绑定的。在这种情况下，箭头函数的 this 指向的是外层作用域的 this，即全局对象（在浏览器中是 window 对象，Node.js 中是 Global 对象）。因此，在 obj.extend.getAge.bind(obj)() 中，this.age 输出的是全局对象的 age，而全局对象中并没有定义 age 属性，所以结果是 undefined。\r\n",{"_58":937,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/519/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/519/timeline",{"_58":940,"_60":61,"_62":941,"_64":942,"_66":943,"_68":944,"_70":945,"_72":946,"_74":947,"_76":948,"_78":949,"_111":950,"_131":132,"_133":24,"_134":-5,"_135":959,"_137":960,"_159":152,"_153":962,"_155":963,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":964,"_170":965,"_176":966,"_178":967,"_190":969,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/497","https://api.github.com/repos/pro-collection/interview-question/issues/497/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/497/comments","https://api.github.com/repos/pro-collection/interview-question/issues/497/events","https://github.com/pro-collection/interview-question/issues/497",1822735870,"I_kwDOJGDC6c5spL3-",497,"onpopstate可以监听到一个pushstate的事件吗【热度: 546】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[951,958],{"_70":952,"_72":953,"_58":954,"_117":955,"_119":956,"_121":24,"_122":957},5252299764,"LA_kwDOJGDC6c8AAAABOQ-79A","https://api.github.com/repos/pro-collection/interview-question/labels/%E6%B5%8F%E8%A7%88%E5%99%A8","浏览器","f9d0c4","浏览器相关知识点",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":272,"_68":273,"_62":274,"_70":275,"_72":276,"_74":277,"_76":278,"_122":279,"_147":961,"_149":281,"_151":152,"_131":132,"_153":282,"_155":283,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-07-26T16:04:37Z","2023-07-26T16:04:38Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：popstate\n\n**`onpopstate` 事件只能监听到浏览器历史记录的前进和后退操作，无法直接监听到 `pushState` 或 `replaceState` 的调用**。这是因为 `pushState` 和 `replaceState` 方法可以修改浏览器历史记录而不触发 `onpopstate` 事件。\n\n但是，您可以在调用 `pushState` 或 `replaceState` 之后手动触发 `popstate` 事件，来模拟类似的效果。示例如下：\n\n```javascript\n// 监听 popstate 事件\nwindow.addEventListener('popstate', function(event) {\n console.log('popstate event triggered');\n});\n\n// 调用 pushState 方法\nwindow.history.pushState(null, null, '/new-url');\n\n// 手动触发 popstate 事件\nvar popStateEvent = new PopStateEvent('popstate', { state: null });\nwindow.dispatchEvent(popStateEvent);\n```\n\n在上述示例中，我们首先通过 `addEventListener` 方法监听 `popstate` 事件。然后，我们调用 `pushState` 方法来修改浏览器历史记录，并在之后手动创建一个 `PopStateEvent` 对象，并使用 `dispatchEvent` 方法来触发 `popstate` 事件。\n\n这样就可以实现在调用 `pushState` 或 `replaceState` 之后手动触发一个事件来模拟监听到 `pushState` 的效果。\n",{"_58":968,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/497/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/497/timeline",{"_58":971,"_60":61,"_62":972,"_64":973,"_66":974,"_68":975,"_70":976,"_72":977,"_74":978,"_76":979,"_78":980,"_111":981,"_131":132,"_133":24,"_134":-5,"_135":984,"_137":985,"_159":152,"_153":987,"_155":988,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":989,"_170":990,"_176":991,"_178":992,"_190":994,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/496","https://api.github.com/repos/pro-collection/interview-question/issues/496/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/496/comments","https://api.github.com/repos/pro-collection/interview-question/issues/496/events","https://github.com/pro-collection/interview-question/issues/496",1822716220,"I_kwDOJGDC6c5spHE8",496,"[React] 如何进行路由变化监听【热度: 698】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[982,983],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":272,"_68":273,"_62":274,"_70":275,"_72":276,"_74":277,"_76":278,"_122":279,"_147":986,"_149":281,"_151":152,"_131":132,"_153":282,"_155":283,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-07-26T15:52:15Z","2023-07-26T15:52:16Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：React 路由、React 路由监听\n\n在 React 中，你可以使用 React Router 库来进行路由变化的监听。React Router 是 React 的一个常用路由库，它提供了一组组件和 API 来帮助你在应用中管理路由。\n\n下面是一个示例代码，演示如何使用 React Router 监听路由的变化：\n\n然后，在你的 React 组件中，使用 BrowserRouter 或 HashRouter 组件包裹你的应用：\n\n```jsx\nimport React from 'react';\nimport { BrowserRouter, HashRouter } from 'react-router-dom';\n\nfunction App() {\n return (\n // 使用 BrowserRouter 或 HashRouter 包裹你的应用\n \n {/* 在这里编写你的应用内容 */}\n \n );\n}\n\nexport default App;\n```\n\n当使用函数组件时，可以使用 `useEffect` 钩子函数来监听路由变化。下面是修改后的示例代码：\n\n```jsx\nimport React, { useEffect } from 'react';\nimport { withRouter } from 'react-router-dom';\n\nfunction MyComponent(props) {\n useEffect(() => {\n const handleRouteChange = (location, action) => {\n // 路由发生变化时执行的处理逻辑\n console.log('路由发生了变化', location, action);\n };\n\n // 在组件挂载后，添加路由变化的监听器\n const unlisten = props.history.listen(handleRouteChange);\n\n // 在组件卸载前，移除监听器\n return () => {\n unlisten();\n };\n }, [props.history]);\n\n return (\n

\n {/* 在这里编写组件的内容 */}\n

\n );\n}\n\n// 使用 withRouter 高阶组件将路由信息传递给组件\nexport default withRouter(MyComponent);\n```\n\n在上面的代码中，我们使用了 `useEffect` 钩子函数来添加路由变化的监听器。在 `useEffect` 的回调函数中，我们定义了 `handleRouteChange` 方法来处理路由变化的逻辑。然后，通过 `props.history.listen` 方法来添加监听器，并将返回的取消监听函数赋值给 `unlisten` 变量。\n\n同时，我们还在 `useEffect` 返回的清理函数中调用了 `unlisten` 函数，以确保在组件卸载时移除监听器。\n\n需要注意的是，由于 `useEffect` 的依赖数组中包含了 `props.history`，所以每当 `props.history` 发生变化时（即路由发生变化时），`useEffect` 的回调函数会被调用，从而更新路由变化的监听器。\n\n总结起来，通过使用 `useEffect` 钩子函数和 `props.history.listen` 方法，可以在函数组件中监听和响应路由的变化。\n",{"_58":993,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/496/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/496/timeline",{"_58":996,"_60":61,"_62":997,"_64":998,"_66":999,"_68":1000,"_70":1001,"_72":1002,"_74":1003,"_76":1004,"_78":1005,"_111":1006,"_131":132,"_133":24,"_134":-5,"_135":1009,"_137":1010,"_159":152,"_153":1012,"_155":1013,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":1014,"_170":1015,"_176":1016,"_178":1017,"_190":1019,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/466","https://api.github.com/repos/pro-collection/interview-question/issues/466/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/466/comments","https://api.github.com/repos/pro-collection/interview-question/issues/466/events","https://github.com/pro-collection/interview-question/issues/466",1766497156,"I_kwDOJGDC6c5pSpuE",466,"[react] constructor 和 getInitialState 的区别?【热度: 785】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[1007,1008],{"_70":688,"_72":689,"_58":690,"_117":691,"_119":692,"_121":24,"_122":693},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":272,"_68":273,"_62":274,"_70":275,"_72":276,"_74":277,"_76":278,"_122":279,"_147":1011,"_149":281,"_151":152,"_131":132,"_153":282,"_155":283,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-21T01:10:15Z","2023-06-21T01:10:16Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：react constructor 作用、react getInitialState 作用、初始化 state\n\n在 React 中，constructor 是一个类的构造函数，用于初始化类的成员变量和方法，这个函数不仅会在组件实例化时调用，还会在后续的组件更新时调用。而 getInitialState 是一个组件的声明周期函数，用于初始化组件的状态，该函数只会在组件实例化时调用一次，后续的更新不会再调用。\n\n具体来说，constructor 用于初始化类成员变量和方法，如下面的示例代码所示：\n\n```\nclass MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n count: 0\n };\n this.handleClick = this.handleClick.bind(this);\n }\n\n handleClick() {\n this.setState({ count: this.state.count + 1 });\n }\n\n render() {\n return (\n

Count: {this.state.count}

\n \n

\n );\n }\n}\n```\n\n在上面的代码中，constructor 用于初始化组件的状态 count 和绑定 handleClick 方法的 this 指向。每次组件更新时，constructor 函数都会被调用。\n\n而 getInitialState 则是用于初始化组件的状态，如下面的示例代码所示：\n\n```\nclass MyComponent extends React.Component {\n getInitialState() {\n return {\n count: 0\n };\n }\n\n handleClick() {\n this.setState({ count: this.state.count + 1 });\n }\n\n render() {\n return (\n

Count: {this.state.count}

\n \n

\n );\n }\n}\n```\n\n在上面的代码中，getInitialState 用于初始化组件的状态 count，该函数只会在组件实例化时调用一次。后续的更新不会再调用。需要注意的是，在 React 16.3 之后，getInitialState 已经不再被支持，需要使用 constructor 来初始化 state。\n",{"_58":1018,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/466/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/466/timeline","pagination",{"_1022":1023,"_167":277},"value",-7,"actionData","errors"]