\n \n

\n );\n }\n}\n```\n\n在这个例子中，我们定义了一个名为 `handleCustomEvent` 的方法来处理自定义事件，然后在组件中通过 `onClick` 属性来绑定该方法。当用户点击按钮时，React 会将该事件包装成一个合成事件对象，并调用 `handleCustomEvent` 方法来处理事件。",{"_58":330,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/134/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/134/timeline",{"_58":333,"_60":61,"_62":334,"_64":335,"_66":336,"_68":337,"_70":338,"_72":339,"_74":340,"_76":341,"_78":342,"_111":343,"_124":125,"_126":24,"_127":-5,"_128":345,"_130":346,"_152":188,"_146":348,"_148":349,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":350,"_163":351,"_169":352,"_171":353,"_183":355,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/133","https://api.github.com/repos/pro-collection/interview-question/issues/133/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/133/comments","https://api.github.com/repos/pro-collection/interview-question/issues/133/events","https://github.com/pro-collection/interview-question/issues/133",1630974166,"I_kwDOJGDC6c5hNrDW",133,"react 18 版本中 setState 是同步还是异步的？",{"_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},[344],{"_70":291,"_72":292,"_58":293,"_117":294,"_119":295,"_121":24,"_122":296},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":347,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-19T14:55:03Z","2023-10-04T10:21:06Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"在 React 18 中，`setState` 的行为仍然是异步的。React 团队并没有改变 `setState` 的默认行为，因为这会带来一些潜在的性能问题和不确定性。异步更新状态可以让 React 在适当的时候批量更新组件状态，从而避免过多的渲染和浏览器的性能问题。\n\n但是，React 18 引入了一个新的特性：批量更新（Batching）。当我们在事件处理函数、异步代码或生命周期函数中调用 `setState` 时，React 会将多个状态更新合并到同一个批次中，从而减少渲染的次数，提高应用的性能。这意味着，即使我们在多个地方调用 `setState` 方法，React 也会将这些调用合并到同一个更新队列中，并在下一个渲染周期中一次性更新所有状态。\n\n在 React 18 中，我们可以使用新的 `startTransition` API 来告诉 React，我们正在进行一次可中断的异步操作，并且希望在操作完成后批量更新组件状态。这个 API 的用法如下：\n\n```js\njsCopy codeimport { startTransition } from 'react';\n\nfunction handleClick() {\n startTransition(() => {\n setState({ count: count + 1 });\n // 执行其他异步操作\n });\n}\n```\n\n在这个例子中，我们通过 `startTransition` API 包装 `setState` 和其他异步操作，告诉 React 我们正在进行一次可中断的异步操作，并且希望在操作完成后批量更新组件状态。这样做可以让我们的应用更加流畅和响应，并且可以提高用户体验。\n\n需要注意的是，`startTransition` API 并不是必须的，如果我们不使用这个 API，React 仍然会在适当的时候批量更新组件状态。这个 API 只是为了让我们更加精确地控制更新的时机，并在必要时进行优化。",{"_58":354,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/133/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/133/timeline",{"_58":357,"_60":61,"_62":358,"_64":359,"_66":360,"_68":361,"_70":362,"_72":363,"_74":364,"_76":365,"_78":366,"_111":367,"_124":125,"_126":24,"_127":-5,"_128":369,"_130":370,"_152":215,"_146":372,"_148":373,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":374,"_163":375,"_169":376,"_171":377,"_183":379,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/132","https://api.github.com/repos/pro-collection/interview-question/issues/132/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/132/comments","https://api.github.com/repos/pro-collection/interview-question/issues/132/events","https://github.com/pro-collection/interview-question/issues/132",1630973229,"I_kwDOJGDC6c5hNq0t",132,"React setState 是同步还是异步的？",{"_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},[368],{"_70":291,"_72":292,"_58":293,"_117":294,"_119":295,"_121":24,"_122":296},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":371,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-19T14:52:06Z","2023-10-04T10:21:43Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"在 React 中，`setState` 方法有时是异步的，有时是同步的，具体取决于使用方式和环境。\r\n\r\n当我们在 React 中调用 `setState` 方法时，React 会将新状态合并到组件的状态队列中，并在未来的某个时间更新组件的状态。这个更新过程是异步的，即不能保证在 `setState` 调用后立即更新状态，而是会将状态更新推迟到下一个渲染周期中。这种情况下，`setState` 方法会返回一个 `Promise` 对象，但该对象不包含任何有用的信息。\r\n\r\n然而，当 `setState` 方法被直接调用，而不是在事件处理函数、异步代码或生命周期函数中被调用时，更新过程是同步的。在这种情况下，React 会立即更新组件的状态，并在更新后立即执行一次重新渲染。这种情况下，`setState` 方法不会返回任何信息。\r\n\r\n需要注意的是，在 React 中异步更新状态的机制可以提高性能和优化页面渲染速度，因为它可以让 React 在适当的时候批量更新组件状态，从而避免过多的渲染和浏览器的性能问题。如果我们需要在更新状态后立即执行某些操作，可以使用 `setState` 方法的回调函数或生命周期函数 `componentDidUpdate` 来实现。例如：\r\n\r\n```js\r\njsCopy codeclass MyComponent extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { count: 0 };\r\n }\r\n\r\n handleClick() {\r\n this.setState({ count: this.state.count + 1 }, () => {\r\n console.log('New count:', this.state.count);\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n

\r\n

Count: {this.state.count}

\r\n \r\n

\r\n );\r\n }\r\n}\r\n```\r\n\r\n这里的 `setState` 方法接受一个回调函数作为第二个参数，在状态更新完成后调用该函数并传递更新后的状态作为参数。在这个回调函数中可以执行任何需要在状态更新后立即执行的操作，例如输出调试信息、发送网络请求等。\r\n\r\n---------------------\r\n> 2023.04.19 更新\r\n\r\n如果**直接在setState后面获取state的值是获取不到的。**\r\n\r\n- 在React内部机制能检测到的地方， setState就是异步的；\r\n- 在React检测不到的地方，例如原生事件`addEventListener`,`setInterval`,`setTimeout`，setState就是同步更新的\r\n\r\n\r\nsetState并不是单纯的异步或同步，这其实与调用时的环境相关\r\n\r\n\r\n- 在合成事件和生命周期钩子(除componentDidUpdate) 中，setState是\"异步\"的；\r\n- 在原生事件和setTimeout 中，setState是同步的，可以马上获取更新后的值；\r\n\r\n**批量更新**\r\n多个顺序的setState不是同步地一个一个执行滴，会一个一个加入队列，然后最后一起执行。在合成事件和生命周期钩子中，setState更新队列时，存储的是合并状态(Object.assign)。因此前面设置的 key 值会被后面所覆盖，最终只会执行一次更新。\r\n\r\n\r\n**异步现象原因**\r\n\r\n`setState 的“异步”并不是说内部由异步代码实现`，其实本身执行的过程和代码都是同步的，只是合成事件和生命钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形成了所谓的“异步”，`当然可以通过第二个参数setState(partialState, callback)中的callback拿到更新后的结果。`\r\n\r\n`setState 并非真异步，只是看上去像异步。在源码中，通过 isBatchingUpdates 来判断`\r\n\r\nsetState调用流程：\r\n\r\n1. 调用this.setState(newState)\r\n2. 将新状态newState存入pending队列\r\n3. 判断是否处于batch Update（isBatchingUpdates是否为true）\r\n - isBatchingUpdates=true，保存组件于dirtyComponents中，走异步更新流程，合并操作，延迟更新；\r\n - isBatchingUpdates=false，走同步过程。遍历所有的dirtyComponents，调用updateComponent，更新pending state or props\r\n \r\n![流程](https://foruda.gitee.com/images/1681866680280312338/0308d34b_7819612.png)\r\n\r\n**为什么直接修改this.state无效**\r\n\r\nsetState本质是通过一个队列机制实现state更新的。执行setState时，会将需要更新的state合并后放入状态队列，而不会立刻更新state，队列机制可以批量更新state。\r\n\r\n如果不通过setState而直接修改this.state，那么这个state不会放入状态队列中，下次调用setState时对状态队列进行合并时，会忽略之前直接被修改的state，这样我们就无法合并了，而且实际也没有把你想要的state更新上去\r\n\r\n\r\n参考文档：\r\n- https://juejin.cn/post/7204307381689532474#heading-5",{"_58":378,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/132/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/132/timeline",{"_58":381,"_60":61,"_62":382,"_64":383,"_66":384,"_68":385,"_70":386,"_72":387,"_74":388,"_76":389,"_78":390,"_111":391,"_124":125,"_126":24,"_127":-5,"_128":393,"_130":394,"_152":145,"_146":396,"_148":396,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":397,"_163":398,"_169":399,"_171":400,"_183":402,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/131","https://api.github.com/repos/pro-collection/interview-question/issues/131/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/131/comments","https://api.github.com/repos/pro-collection/interview-question/issues/131/events","https://github.com/pro-collection/interview-question/issues/131",1630971714,"I_kwDOJGDC6c5hNqdC",131,"react lazy import 实现懒加载的原理是什么？",{"_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},[392],{"_70":291,"_72":292,"_58":293,"_117":294,"_119":295,"_121":24,"_122":296},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_140":395,"_142":219,"_144":145,"_124":125,"_146":220,"_148":221,"_150":-5,"_151":-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-03-19T14:47:35Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"React 的 `lazy` 函数可以实现代码分割，即将代码按需加载，以达到优化页面加载速度的目的。它的原理是基于 JavaScript 的动态 `import()` 方法实现的。\n\n当我们使用 `lazy` 函数加载一个组件时，React 会自动将该组件的代码单独打包成一个单独的 JavaScript 文件，并在需要时通过网络请求加载该文件。具体来说，`lazy` 函数返回的是一个特殊的组件，该组件在加载时会调用传入的函数并异步加载组件代码。一般来说，我们会将异步加载的组件通过 `import()` 方法引入，例如：\n\n```js\njsCopy codeconst MyComponent = React.lazy(() => import('./MyComponent'));\n```\n\n这里的 `import()` 方法会返回一个 Promise，该 Promise 在组件代码加载完成后会 resolve，然后通过 React 渲染该组件。\n\n需要注意的是，由于异步加载组件的代码是在运行时执行的，而不是在构建时，因此需要使用符合 ECMAScript 标准的动态 `import()` 方法。此外，在使用 `lazy` 函数时还需要将组件包裹在 `Suspense` 组件中，以处理组件加载时的占位符或错误状态。例如：\n\n```js\njsCopy codeimport React, { lazy, Suspense } from 'react';\n\nconst MyComponent = lazy(() => import('./MyComponent'));\n\nfunction App() {\n return (\n

\n Loading...

}>\n \n \n \n );\n}\n```\n\n这里的 `fallback` 属性指定了组件加载时的占位符，当组件加载完成后会自动替换成真正的组件。\n\n综上所述，React 的 `lazy` 函数通过使用动态 `import()` 方法实现了组件代码的按需加载，以达到优化页面加载速度的目的。",{"_58":401,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/131/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/131/timeline",{"_58":404,"_60":61,"_62":405,"_64":406,"_66":407,"_68":408,"_70":409,"_72":410,"_74":411,"_76":412,"_78":413,"_111":414,"_124":125,"_126":24,"_127":-5,"_128":416,"_130":417,"_152":145,"_146":419,"_148":420,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":421,"_163":422,"_169":423,"_171":424,"_183":426,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/130","https://api.github.com/repos/pro-collection/interview-question/issues/130/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/130/comments","https://api.github.com/repos/pro-collection/interview-question/issues/130/events","https://github.com/pro-collection/interview-question/issues/130",1630970505,"I_kwDOJGDC6c5hNqKJ",130,"react 遍历渲染节点列表，为什么要加 key ?",{"_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},[415],{"_70":291,"_72":292,"_58":293,"_117":294,"_119":295,"_121":24,"_122":296},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_140":418,"_142":219,"_144":145,"_124":125,"_146":220,"_148":221,"_150":-5,"_151":-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-03-19T14:43:47Z","2023-03-19T14:47:57Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"在 React 中，当我们使用数组渲染节点列表时，通常需要给每个节点添加一个 `key` 属性，这是因为 React 需要通过 `key` 属性来判断是否需要更新某个节点，从而提高渲染性能。\n\n具体来说，React 在进行更新时，会根据 `key` 属性来判断哪些节点需要更新，哪些节点需要删除，哪些节点需要新增。如果两个节点的 `key` 值相同，则 React 认为它们是同一个节点，会尝试进行复用，否则会销毁旧节点并创建新节点。如果没有 `key` 属性，React 无法判断哪些节点是同一个节点，就需要进行全量更新，这会导致性能下降。\n\n另外，添加 `key` 属性还可以解决一些潜在的问题。例如，当我们通过 `map` 函数生成节点列表时，如果没有给节点添加 `key` 属性，当列表中的某个节点发生变化时，可能会导致其他节点的 `props` 或状态也被重置。如果给每个节点添加了唯一的 `key` 属性，就可以避免这种问题。\n\n因此，总的来说，为节点列表添加 `key` 属性可以提高渲染性能，并避免潜在的问题。",{"_58":425,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/130/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/130/timeline",{"_58":428,"_60":61,"_62":429,"_64":430,"_66":431,"_68":432,"_70":433,"_72":434,"_74":435,"_76":436,"_78":437,"_111":438,"_124":125,"_126":24,"_127":-5,"_128":446,"_130":447,"_152":145,"_146":449,"_148":449,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":450,"_163":451,"_169":452,"_171":453,"_183":455,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/129","https://api.github.com/repos/pro-collection/interview-question/issues/129/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/129/comments","https://api.github.com/repos/pro-collection/interview-question/issues/129/events","https://github.com/pro-collection/interview-question/issues/129",1630958477,"I_kwDOJGDC6c5hNnON",129,"有什么方法可以保持前后端实时通信？",{"_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},[439],{"_70":440,"_72":441,"_58":442,"_117":443,"_119":444,"_121":24,"_122":445},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","网络","1A8829","web 网络相关",[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_140":448,"_142":219,"_144":145,"_124":125,"_146":220,"_148":221,"_150":-5,"_151":-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-03-19T14:08:54Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"实时通信是一种双向的通信方式，前后端都能实时地获取对方的数据和状态变化，目前主要有以下几种方法可以实现：\n\n1. WebSocket：WebSocket 是一种基于 TCP 协议的双向通信协议，它可以在客户端和服务器之间建立持久性的连接，并且支持服务器主动向客户端推送数据。WebSocket 协议通过 HTTP 协议的 101 状态码进行握手，握手成功后，客户端和服务器之间的通信就不再使用 HTTP 协议，而是使用 WebSocket 协议。WebSocket 协议具有低延迟、高效、实时等优点，适用于实时通信、在线游戏、股票行情等场景。\n\n2. Server-Sent Events（SSE）：SSE 是一种基于 HTTP 协议的服务器推送技术，它允许服务器向客户端推送文本数据或事件数据，而无需客户端发起请求。SSE 协议通过 HTTP 的长连接机制实现服务器向客户端的推送，客户端通过 EventSource API 接口接收服务器推送的数据。SSE 协议比较简单，实现也比较容易，适用于需要推送数据而不需要客户端与服务器进行双向通信的场景。\n\n3. 长轮询（Long Polling）：长轮询是一种基于 HTTP 协议的服务器推送技术，它通过客户端向服务器发送一个长时间的请求，服务器在有数据更新时返回响应，否则将一直等待一段时间后才返回响应。客户端收到响应后立即发起下一次请求。长轮询比较容易实现，适用于需要实时通知客户端数据变化但不需要高实时性的场景。\n\n4. WebRTC：WebRTC 是一种实时通信协议，它基于 P2P 技术，可以在浏览器之间直接建立通信，并实现视频、音频、数据等多媒体的实时传输。WebRTC 协议支持点对点通信，不需要经过服务器转发，因此具有低延迟、高效、实时等优点，适用于实时视频、音频等场景。\n\n总的来说，WebSocket 和 SSE 协议适用于需要服务器主动向客户端推送数据的场景，长轮询适用于需要实时通知客户端数据变化但不需要高实时性的场景，WebRTC 协议适用于实时视频、音频等场景。选择哪种方法要根据具体的业务场景和需求来决定。",{"_58":454,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/129/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/129/timeline",{"_58":457,"_60":61,"_62":458,"_64":459,"_66":460,"_68":461,"_70":462,"_72":463,"_74":464,"_76":465,"_78":466,"_111":467,"_124":125,"_126":24,"_127":-5,"_128":469,"_130":470,"_152":145,"_146":472,"_148":473,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":474,"_163":475,"_169":476,"_171":477,"_183":479,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/128","https://api.github.com/repos/pro-collection/interview-question/issues/128/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/128/comments","https://api.github.com/repos/pro-collection/interview-question/issues/128/events","https://github.com/pro-collection/interview-question/issues/128",1630957428,"I_kwDOJGDC6c5hNm90",128,"axios的拦截器原理及应用、简单手写核心逻辑？",{"_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},[468],{"_70":291,"_72":292,"_58":293,"_117":294,"_119":295,"_121":24,"_122":296},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_140":471,"_142":219,"_144":145,"_124":125,"_146":220,"_148":221,"_150":-5,"_151":-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-03-19T14:05:59Z","2023-03-19T14:06:00Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"### axios 拦截器的使用\n\nAxios 是一个基于 Promise 的 HTTP 客户端库，可以用于浏览器和 Node.js 环境中发送 HTTP 请求。Axios 提供了拦截器机制，可以在请求发送前和响应返回后对请求和响应进行拦截和处理，从而实现一些通用的功能，例如：添加请求头、添加认证信息、显示 loading 状态、错误处理等。\n\nAxios 的拦截器机制主要是通过 `interceptors` 属性来实现的，该属性包含了 `request` 和 `response` 两个对象，分别代表请求拦截器和响应拦截器。每个对象都包含 `use` 方法，该方法用于注册拦截器回调函数，拦截器回调函数会在请求发送前或响应返回后被调用。\n\n下面是一个示例代码，展示了如何使用 Axios 的拦截器：\n\n```javascript\nimport axios from 'axios'\n\n// 添加请求拦截器\naxios.interceptors.request.use(function (config) {\n // 在发送请求之前做些什么\n console.log('请求拦截器')\n return config\n}, function (error) {\n // 对请求错误做些什么\n return Promise.reject(error)\n})\n\n// 添加响应拦截器\naxios.interceptors.response.use(function (response) {\n // 对响应数据做点什么\n console.log('响应拦截器')\n return response\n}, function (error) {\n // 对响应错误做点什么\n return Promise.reject(error)\n})\n\n// 发送请求\naxios.get('/api/user')\n .then(function (response) {\n // 处理响应数据\n })\n .catch(function (error) {\n // 处理请求错误\n })\n```\n\n在上面的代码中，我们首先通过 `import` 语句引入了 Axios 库。然后，我们调用 `axios.interceptors.request.use` 方法注册了一个请求拦截器回调函数，该函数会在发送请求前被调用，可以在该函数中进行一些通用的操作，例如添加请求头、添加认证信息等。接着，我们调用 `axios.interceptors.response.use` 方法注册了一个响应拦截器回调函数，该函数会在响应返回后被调用，可以在该函数中进行一些通用的操作，例如显示 loading 状态、错误处理等。\n\n最后，我们使用 `axios.get` 方法发送请求，并通过 `then` 和 `catch` 方法处理响应数据和请求错误。在请求发送前和响应返回后，我们注册的拦截器回调函数会被自动调用，可以对请求和响应进行拦截和处理。\n\nAxios 的拦截器机制非常强大，可以用于实现一些通用的功能，例如添加请求头、添加认证信息、显示 loading 状态、错误处理等。在实际开发中，我们经常会使用 Axios 的拦截器来提高代码的复用性和可维护性。\n\n### axios 拦截器原理\n\nAxios 的拦截器机制是通过 `interceptors` 属性来实现的，该属性包含了 `request` 和 `response` 两个对象，分别代表请求拦截器和响应拦截器。每个对象都包含 `use` 方法，该方法用于注册拦截器回调函数，拦截器回调函数会在请求发送前或响应返回后被调用。\n\n具体来说，当我们使用 `axios` 发送请求时，会先调用请求拦截器的回调函数，该函数会在请求发送前被调用，可以在该函数中进行一些通用的操作，例如添加请求头、添加认证信息等。如果请求拦截器返回的不是一个 Promise 对象，则会自动将其封装为一个 Promise 对象。\n\n接着，Axios 会使用 XMLHTTPRequest 对象发送请求，并监听其状态变化事件。当响应返回后，Axios 会调用响应拦截器的回调函数，该函数会在响应返回后被调用，可以在该函数中进行一些通用的操作，例如显示 loading 状态、错误处理等。如果响应拦截器返回的不是一个 Promise 对象，则会自动将其封装为一个 Promise 对象。\n\n需要注意的是，Axios 的拦截器是按照添加顺序依次执行的，也就是说，先添加的拦截器回调函数先执行，后添加的拦截器回调函数后执行。如果一个拦截器回调函数中没有调用 `next` 方法，则后面的拦截器回调函数将不会被执行。\n\n下面是一个示例代码，展示了如何使用 Axios 的拦截器：\n\n```javascript\nimport axios from 'axios'\n\n// 添加请求拦截器\naxios.interceptors.request.use(function (config) {\n // 在发送请求之前做些什么\n console.log('请求拦截器')\n return config\n}, function (error) {\n // 对请求错误做些什么\n return Promise.reject(error)\n})\n\n// 添加响应拦截器\naxios.interceptors.response.use(function (response) {\n // 对响应数据做点什么\n console.log('响应拦截器')\n return response\n}, function (error) {\n // 对响应错误做点什么\n return Promise.reject(error)\n})\n\n// 发送请求\naxios.get('/api/user')\n .then(function (response) {\n // 处理响应数据\n })\n .catch(function (error) {\n // 处理请求错误\n })\n```\n\n在上面的代码中，我们首先通过 `import` 语句引入了 Axios 库。然后，我们调用 `axios.interceptors.request.use` 方法注册了一个请求拦截器回调函数，该函数会在发送请求前被调用，可以在该函数中进行一些通用的操作，例如添加请求头、添加认证信息等。接着，我们调用 `axios.interceptors.response.use` 方法注册了一个响应拦\n\n### axios 拦截器核心逻辑代码实现\n\n下面是一个简单实现 Axios 拦截器核心逻辑的示例代码：\n\n```javascript\nclass Axios {\n constructor() {\n // 请求拦截器\n this.requestInterceptors = []\n // 响应拦截器\n this.responseInterceptors = []\n }\n\n // 注册请求拦截器\n useRequestInterceptor(callback) {\n this.requestInterceptors.push(callback)\n }\n\n // 注册响应拦截器\n useResponseInterceptor(callback) {\n this.responseInterceptors.push(callback)\n }\n\n // 发送请求\n async request(config) {\n // 执行请求拦截器\n for (const interceptor of this.requestInterceptors) {\n config = await interceptor(config)\n }\n\n // 发送请求\n const response = await fetch(config.url, {\n method: config.method,\n headers: config.headers,\n body: config.data\n })\n\n // 执行响应拦截器\n for (const interceptor of this.responseInterceptors) {\n response = await interceptor(response)\n }\n\n return response\n }\n}\n\n// 创建 Axios 实例\nconst axios = new Axios()\n\n// 注册请求拦截器\naxios.useRequestInterceptor(config => {\n // 在请求头中添加认证信息\n config.headers['Authorization'] = 'Bearer xxx'\n return config\n})\n\n// 注册响应拦截器\naxios.useResponseInterceptor(response => {\n // 处理响应数据\n return response.json()\n})\n\n// 发送请求\naxios.request({\n url: '/api/user',\n method: 'GET'\n}).then(data => {\n // 处理响应数据\n console.log(data)\n}).catch(error => {\n // 处理请求错误\n console.error(error)\n})\n```\n\n在上面的代码中，我们首先定义了一个 `Axios` 类，该类包含了请求拦截器和响应拦截器两个属性，分别用于保存注册的拦截器回调函数。然后，我们定义了 `useRequestInterceptor` 和 `useResponseInterceptor` 两个方法，用于注册请求拦截器和响应拦截器回调函数。在这两个方法中，我们将回调函数保存到对应的属性中。\n\n接着，我们定义了 `request` 方法，该方法用于发送请求。在 `request` 方法中，我们首先执行请求拦截器回调函数，将请求配置传递给回调函数，并将回调函数返回的结果赋值给请求配置。接着，我们使用 `fetch` 函数发送请求，并将响应保存到 `response` 变量中。然后，我们执行响应拦截器回调函数，将响应对象传递给回调函数，并将回调函数返回的结果赋值给响应对象。最后，我们返回响应对象。\n\n在最后几行代码中，我们创建了一个 `axios` 实例，并使用 `useRequestInterceptor` 方法和 `useResponseInterceptor` 方法注册了请求拦截器和响应拦截器回调函数。然后，我们调用 `request` 方法发送请求，并使用 `then` 方法处理响应数据，使用 `catch` 方法处理请求错误。",{"_58":478,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/128/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/128/timeline",{"_58":481,"_60":61,"_62":482,"_64":483,"_66":484,"_68":485,"_70":486,"_72":487,"_74":488,"_76":489,"_78":490,"_111":491,"_124":125,"_126":24,"_127":-5,"_128":499,"_130":500,"_152":145,"_146":502,"_148":503,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":504,"_163":505,"_169":506,"_171":507,"_183":509,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/127","https://api.github.com/repos/pro-collection/interview-question/issues/127/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/127/comments","https://api.github.com/repos/pro-collection/interview-question/issues/127/events","https://github.com/pro-collection/interview-question/issues/127",1630945649,"I_kwDOJGDC6c5hNkFx",127,"如何实现可过期的 localstorage 数据?",{"_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},[492],{"_70":493,"_72":494,"_58":495,"_117":496,"_119":497,"_121":24,"_122":498},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","JavaScript","A4D8FB","JavaScript 语法部分",[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":501,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-19T13:36:22Z","2024-10-26T08:28:47Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"以下是一个封装了支持过期时间的`localStorage`的示例代码：\r\n\r\n```javascript\r\nclass EnhancedLocalStorage {\r\n constructor() {\r\n this.prefix = 'enhanced_storage_';\r\n }\r\n\r\n setItem(key, value, expirationInSeconds) {\r\n const item = {\r\n value,\r\n expirationTime: expirationInSeconds? Date.now() + expirationInSeconds * 1000 : null\r\n };\r\n localStorage.setItem(this.prefix + key, JSON.stringify(item));\r\n }\r\n\r\n getItem(key) {\r\n const itemStr = localStorage.getItem(this.prefix + key);\r\n if (!itemStr) return null;\r\n const item = JSON.parse(itemStr);\r\n if (item.expirationTime && item.expirationTime < Date.now()) {\r\n localStorage.removeItem(this.prefix + key);\r\n return null;\r\n }\r\n return item.value;\r\n }\r\n\r\n removeItem(key) {\r\n localStorage.removeItem(this.prefix + key);\r\n }\r\n}\r\n\r\nconst enhancedStorage = new EnhancedLocalStorage();\r\nexport default enhancedStorage;\r\n```\r\n\r\n使用方法如下：\r\n\r\n```javascript\r\n// 设置带有过期时间的存储项\r\nenhancedStorage.setItem('myKey', 'myValue', 60); // 60 秒后过期\r\n\r\n// 获取存储项\r\nconst value = enhancedStorage.getItem('myKey');\r\nconsole.log(value);\r\n\r\n// 一段时间后，存储项过期\r\nsetTimeout(() => {\r\n const expiredValue = enhancedStorage.getItem('myKey');\r\n console.log(expiredValue); // null\r\n}, 65000);\r\n```\r\n\r\n在这个封装中，使用了一个自定义的前缀来避免与普通的`localStorage`键冲突。设置项时，会记录一个过期时间，如果有过期时间且当前时间超过了过期时间，在获取项时会返回`null`并自动删除该项。",{"_58":508,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/127/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/127/timeline",{"_58":511,"_60":61,"_62":512,"_64":513,"_66":514,"_68":515,"_70":516,"_72":517,"_74":518,"_76":519,"_78":520,"_111":521,"_124":125,"_126":24,"_127":-5,"_128":523,"_130":524,"_152":145,"_146":526,"_148":527,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":528,"_163":529,"_169":530,"_171":531,"_183":533,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/126","https://api.github.com/repos/pro-collection/interview-question/issues/126/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/126/comments","https://api.github.com/repos/pro-collection/interview-question/issues/126/events","https://github.com/pro-collection/interview-question/issues/126",1630945151,"I_kwDOJGDC6c5hNj9_",126,"es5 和 es6 使用 new 关键字实例化对象的流程是一样的吗？",{"_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},[522],{"_70":493,"_72":494,"_58":495,"_117":496,"_119":497,"_121":24,"_122":498},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":525,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-19T13:34:48Z","2023-03-19T13:34:49Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"ES5 和 ES6 使用 `new` 关键字实例化对象的流程基本上是一样的，只是在细节上存在一些差异。\n\n在 ES5 中，当使用 `new` 关键字调用一个函数时，会创建一个新的对象，并将这个新对象的 `[[Prototype]]` 属性指向构造函数的 `prototype` 属性。此外，`new` 关键字还会将构造函数内部的 `this` 关键字绑定到新创建的对象上，从而允许我们在构造函数内部添加属性和方法。\n\n在 ES6 中，这些基本的流程也是相同的。但是，ES6 引入了类（class）的概念，从而为面向对象编程提供了更加便利的语法。使用类定义一个对象时，需要使用 `constructor` 方法作为构造函数，而不是普通的函数。类定义的语法糖实际上是对函数的封装，使用 `new` 关键字创建类的实例时，实际上也是在调用类的 `constructor` 方法。\n\n在 ES6 中，可以使用类的继承来创建更复杂的对象。当使用 `new` 关键字创建一个继承自另一个类的类的实例时，会先调用父类的 `constructor` 方法，再调用子类的 `constructor` 方法，从而完成对象实例的创建过程。\n\n需要注意的是，虽然 ES6 的类看起来像是其他面向对象语言中的类，但在 JavaScript 中，类仍然是基于原型继承的。在创建一个类的实例时，实际上是在创建一个新对象，并将这个新对象的原型指向类的原型。因此，实例化对象的流程与使用普通函数或类定义的对象的流程基本上是相同的。",{"_58":532,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/126/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/126/timeline",{"_58":535,"_60":61,"_62":536,"_64":537,"_66":538,"_68":539,"_70":540,"_72":541,"_74":542,"_76":543,"_78":544,"_111":545,"_124":125,"_126":24,"_127":-5,"_128":547,"_130":548,"_152":145,"_146":550,"_148":550,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":551,"_163":552,"_169":553,"_171":554,"_183":556,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/125","https://api.github.com/repos/pro-collection/interview-question/issues/125/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/125/comments","https://api.github.com/repos/pro-collection/interview-question/issues/125/events","https://github.com/pro-collection/interview-question/issues/125",1630942806,"I_kwDOJGDC6c5hNjZW",125,"当使用 new 关键字创建对象时, 会经历哪些步骤？",{"_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},[546],{"_70":493,"_72":494,"_58":495,"_117":496,"_119":497,"_121":24,"_122":498},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":549,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-19T13:30:24Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"在 JavaScript 中，`new` 关键字用于创建一个对象实例。当使用 `new` 关键字创建对象时，会发生以下几个步骤：\n\n1. 创建一个空的对象。\n2. 将这个空对象的 `[[Prototype]]` 属性设置为构造函数的 `prototype` 属性。\n3. 将这个空对象赋值给构造函数内部的 `this` 关键字，用于初始化属性和方法。\n4. 如果构造函数返回一个对象，那么返回这个对象；否则，返回第一步创建的对象实例。\n\n以下是一个示例，演示如何使用 `new` 关键字创建一个对象实例：\n\n```javascript\nfunction Person(name, age) {\n this.name = name;\n this.age = age;\n}\n\nconst person = new Person(\"John\", 30);\nconsole.log(person.name); // \"John\"\nconsole.log(person.age); // 30\n```\n\n在上面的示例中，`new Person(\"John\", 30)` 会创建一个新的对象实例。在构造函数 `Person` 中，`this.name` 和 `this.age` 会被赋值为 `\"John\"` 和 `30`。最终，`new` 关键字会返回这个新的对象实例。\n\n需要注意的是，在 JavaScript 中，函数也是对象。因此，我们可以向对象一样定义属性和方法。当我们使用 `new` 关键字调用一个函数时，这个函数会被视为构造函数，从而创建一个新的对象实例。",{"_58":555,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/125/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/125/timeline",{"_58":558,"_60":61,"_62":559,"_64":560,"_66":561,"_68":562,"_70":563,"_72":564,"_74":565,"_76":566,"_78":567,"_111":568,"_124":125,"_126":24,"_127":-5,"_128":570,"_130":571,"_152":145,"_146":573,"_148":574,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":575,"_163":576,"_169":577,"_171":578,"_183":580,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/124","https://api.github.com/repos/pro-collection/interview-question/issues/124/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/124/comments","https://api.github.com/repos/pro-collection/interview-question/issues/124/events","https://github.com/pro-collection/interview-question/issues/124",1630940863,"I_kwDOJGDC6c5hNi6_",124,"Vue 中 $nextTick 作用与原理是啥？",{"_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},[569],{"_70":291,"_72":292,"_58":293,"_117":294,"_119":295,"_121":24,"_122":296},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_140":572,"_142":219,"_144":145,"_124":125,"_146":220,"_148":221,"_150":-5,"_151":-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-03-19T13:24:06Z","2023-03-19T13:24:07Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"`$nextTick` 是 Vue.js 提供的一个实例方法，用于在 DOM 更新之后执行一些操作。具体来说，它会将回调函数推迟到下次 DOM 更新循环之后执行。\n\n在 Vue 中，数据变化时，Vue 会异步执行视图更新。例如，当一个数据变化时，Vue 会将这个变化包装成一个更新任务，并将其推入更新队列。Vue 会在下一个事件循环周期中遍历这个队列，并依次执行更新任务，最终将视图更新为最新状态。\n\n在某些情况下，我们需要在 DOM 更新之后执行一些操作，例如在 Vue 中更新 DOM 后获取更新后的元素尺寸、在 Vue 组件中调用子组件的方法等等。如果直接在数据变化后立即执行这些操作，可能会遇到一些问题，例如元素尺寸并未更新，子组件尚未完全挂载等等。这时候，就需要使用 `$nextTick` 方法。\n\n`$nextTick` 的实现原理是利用了 JavaScript 的事件循环机制。具体来说，当调用 `$nextTick` 方法时，Vue 会将回调函数推入一个回调队列中。在下一个事件循环周期中，Vue 会遍历这个回调队列，并依次执行其中的回调函数。由于在这个时候 DOM 已经完成了更新，因此可以安全地执行需要在 DOM 更新之后进行的操作。\n\n需要注意的是，`$nextTick` 是异步执行的，因此不能保证回调函数会立即执行。如果需要等待 `$nextTick` 的回调函数执行完毕后再继续执行某些操作，可以使用 Promise 或 async/await 来等待异步操作的完成。",{"_58":579,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/124/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/124/timeline",{"_58":582,"_60":61,"_62":583,"_64":584,"_66":585,"_68":586,"_70":587,"_72":588,"_74":589,"_76":590,"_78":591,"_111":592,"_124":125,"_126":24,"_127":-5,"_128":594,"_130":595,"_152":145,"_146":597,"_148":598,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":599,"_163":600,"_169":601,"_171":602,"_183":604,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/123","https://api.github.com/repos/pro-collection/interview-question/issues/123/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/123/comments","https://api.github.com/repos/pro-collection/interview-question/issues/123/events","https://github.com/pro-collection/interview-question/issues/123",1630940136,"I_kwDOJGDC6c5hNivo",123,"script 标签 defer 和 async 区别？",{"_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},[593],{"_70":202,"_72":203,"_58":204,"_117":205,"_119":206,"_121":24,"_122":207},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_140":596,"_142":219,"_144":145,"_124":125,"_146":220,"_148":221,"_150":-5,"_151":-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-03-19T13:22:06Z","2023-03-19T13:26:23Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"`defer` 和 `async` 是用于控制脚本加载和执行的 HTML `\n```\n\n在上面的示例中，我们在模板中使用 `v-model` 指令将输入框和 `message` 响应式对象进行双向绑定。当用户在输入框中输入文本时，`message` 响应式对象的值会自动更新，当 `message` 响应式对象的值发生改变时，界面上的文本也会自动更新。\n\n总之，Vue3.0 使用 `reactive` 和 `ref` 函数来实现数据双向绑定。使用 `reactive` 函数可以创建包含多个属性的响应式对象，使用 `ref` 函数可以创建包含单个值的响应式对象。通过在模板中使用 \\`v-model\n\n指令可以实现表单元素和组件的双向数据绑定，将表单元素的值绑定到响应式对象的属性上，当响应式对象的属性值变化时，自动更新绑定的表单元素的值。\n\n除了使用 `v-model` 指令实现双向绑定，Vue3.0 也提供了 `watch` 函数和 `watchEffect` 函数来实现响应式数据的监听和副作用函数的执行。这些函数可以用来监听响应式数据的变化，从而执行特定的操作。下面是一个使用 `watch` 函数监听响应式数据变化的示例：\n\n```html\nhtmlCopy code\n\n\n```\n\n在上面的示例中，我们使用 `watch` 函数监听 `count` 响应式对象的变化，当 `count` 响应式对象的值发生变化时，会自动调用回调函数，打印出 `count` 变化前和变化后的值。\n\n另外，Vue3.0 中还提供了 `computed` 函数用来计算一个响应式对象的值，`toRefs` 函数用来将一个响应式对象转换为普通的对象，并且在 TypeScript 中使用时可以使用 `defineComponent` 函数来定义组件的类型，从而提高代码的可读性和可维护性。",{"_58":835,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/114/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/114/timeline",{"_58":838,"_60":61,"_62":839,"_64":840,"_66":841,"_68":842,"_70":843,"_72":844,"_74":845,"_76":846,"_78":847,"_111":848,"_124":125,"_126":24,"_127":-5,"_128":850,"_130":851,"_152":145,"_146":853,"_148":854,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":855,"_163":856,"_169":857,"_171":858,"_183":860,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/113","https://api.github.com/repos/pro-collection/interview-question/issues/113/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/113/comments","https://api.github.com/repos/pro-collection/interview-question/issues/113/events","https://github.com/pro-collection/interview-question/issues/113",1625699298,"I_kwDOJGDC6c5g5jPi",113,"React Router 中 HashRouter 和 BrowserRouter 的区别和原理？",{"_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},[849],{"_70":291,"_72":292,"_58":293,"_117":294,"_119":295,"_121":24,"_122":296},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_140":852,"_142":219,"_144":145,"_124":125,"_146":220,"_148":221,"_150":-5,"_151":-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-03-15T15:01:37Z","2023-03-15T15:02:11Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"React Router 是一个流行的第三方库，它允许在 React 应用程序中实现路由功能。React Router 支持两种路由方式：HashRouter 和 BrowserRouter。\n\n1. HashRouter\n\nHashRouter 使用 URL 中的 hash 部分（即 #）来实现路由。在 React 中，可以使用 `` 组件来创建 HashRouter。例如：\n\n```jsx\njsxCopy codeimport { HashRouter, Route, Link } from 'react-router-dom';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n在使用 HashRouter 时，URL 中的路径看起来像这样：`http://example.com/#/about`。HashRouter 不会向服务器发送请求，因为 # 符号后面的内容被浏览器认为是 URL 的一部分，而不是服务器请求的一部分。这意味着在使用 HashRouter 时，React 应用程序可以在客户端上运行，而无需服务器支持。\n\n2. BrowserRouter\n\nBrowserRouter 使用 HTML5 的 history API 来实现路由。在 React 中，可以使用 `` 组件来创建 BrowserRouter。例如：\n\n```jsx\njsxCopy codeimport { BrowserRouter, Route, Link } from 'react-router-dom';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n在使用 BrowserRouter 时，URL 中的路径看起来像这样：`http://example.com/about`。BrowserRouter 通过 history API 在客户端和服务器之间发送请求，因此需要服务器支持。\n\n3. 区别\n\nHashRouter 和 BrowserRouter 的主要区别在于它们如何处理 URL。HashRouter 使用 URL 中的 # 部分来实现路由，而 BrowserRouter 使用 HTML5 的 history API 来实现路由。HashRouter 不需要服务器支持，而 BrowserRouter 需要服务器支持。\n\n4. 原理\n\nHashRouter 的原理是通过监听 `window.location.hash` 的变化来实现路由。当用户点击链接时，React Router 会根据链接的路径渲染相应的组件，并将路径添加到 URL 中的 # 部分。当用户点击浏览器的“后退”按钮时，React Router 会根据上一个 URL 中的 # 部分来渲染相应的组件。\n\nBrowserRouter 的原理是通过 HTML5 的 history API 来实现路由。当用户点击链接时，React Router 会使用 history API 将路径添加到浏览器的历史记录中，并渲染相应的组件。当用户点击浏览器的“后退”",{"_58":859,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/113/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/113/timeline",{"_58":862,"_60":61,"_62":863,"_64":864,"_66":865,"_68":866,"_70":867,"_72":868,"_74":869,"_76":870,"_78":871,"_111":872,"_124":125,"_126":24,"_127":-5,"_128":874,"_130":875,"_152":145,"_146":877,"_148":878,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":879,"_163":880,"_169":881,"_171":882,"_183":884,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/112","https://api.github.com/repos/pro-collection/interview-question/issues/112/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/112/comments","https://api.github.com/repos/pro-collection/interview-question/issues/112/events","https://github.com/pro-collection/interview-question/issues/112",1625688679,"I_kwDOJGDC6c5g5gpn",112,"CSS 尺寸单位有哪些？",{"_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},[873],{"_70":737,"_72":738,"_58":739,"_117":740,"_119":741,"_121":24,"_122":742},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_140":876,"_142":219,"_144":145,"_124":125,"_146":220,"_148":221,"_150":-5,"_151":-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-03-15T14:56:09Z","2023-03-15T14:56:10Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"CSS尺寸设置的单位包括：\n\n1. 像素（Pixel，缩写为px）：是最常用的单位，表示屏幕上的一个点，可以精确地指定元素的大小。\n\n2. 百分比（Percentage，缩写为%）：相对于父元素的大小，可以根据父元素的大小来设置子元素的大小。\n\n3. em：相对于当前元素的字体大小，用于设置字体大小时很常用。\n\n4. rem：相对于根元素（即html元素）的字体大小。\n\n5. vh/vw：相对于视口（Viewport）的高度和宽度。\n\n6. cm、mm、in、pt、pc等长度单位：用于打印样式表，不建议在Web开发中使用。\n\n7. 自定义单位：可以通过CSS的calc()函数自定义单位，比如使用“1fr”作为网格布局中的单位。\n\n需要注意的是，不同的浏览器可能会有不同的计算方式和默认值，因此在设置尺寸时需要进行充分的测试和兼容性处理。",{"_58":883,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/112/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/112/timeline",{"_58":886,"_60":61,"_62":887,"_64":888,"_66":889,"_68":890,"_70":891,"_72":892,"_74":893,"_76":894,"_78":895,"_111":896,"_124":125,"_126":24,"_127":-5,"_128":898,"_130":899,"_152":145,"_146":911,"_148":912,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":913,"_163":914,"_169":915,"_171":916,"_183":918,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/111","https://api.github.com/repos/pro-collection/interview-question/issues/111/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/111/comments","https://api.github.com/repos/pro-collection/interview-question/issues/111/events","https://github.com/pro-collection/interview-question/issues/111",1625654644,"I_kwDOJGDC6c5g5YV0",111,"null 和 undefined 的区别，如何让一个属性变为 null？",{"_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},[897],{"_70":493,"_72":494,"_58":495,"_117":496,"_119":497,"_121":24,"_122":498},[],{"_58":900,"_68":901,"_62":902,"_70":903,"_72":904,"_74":188,"_76":905,"_122":906,"_140":907,"_142":908,"_144":145,"_124":125,"_146":909,"_148":910,"_150":-5,"_151":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/1","https://github.com/pro-collection/interview-question/milestone/1","https://api.github.com/repos/pro-collection/interview-question/milestones/1/labels",9124541,"MI_kwDOJGDC6c4Aizq9","初","初级面试问题",{"_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},79,"2023-03-06T14:59:51Z","2024-11-22T14:22:55Z","2023-03-15T14:36:43Z","2023-03-15T14:36:44Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"`null`和`undefined`都是JavaScript中表示缺失或无值的特殊值。\n\n`undefined`是一个变量没有被赋值时的默认值，或者在访问对象属性或数组元素不存在时返回的值。例如：\n\n```javascript\nlet a;\nconsole.log(a); // 输出 undefined\n\nconst obj = {};\nconsole.log(obj.nonexistentProp); // 输出 undefined\n```\n\n而`null`表示一个变量被明确地赋值为没有值。例如：\n\n```javascript\nconst a = null;\nconsole.log(a); // 输出 null\n```\n\n要将一个属性的值设置为`null`，可以像这样：\n\n```javascript\nconst obj = { prop: 'value' };\nobj.prop = null;\nconsole.log(obj.prop); // 输出 null\n```\n\n如果要删除对象的属性并将其值设置为`null`，可以使用`delete`操作符：\n\n```javascript\nconst obj = { prop: 'value' };\ndelete obj.prop;\nobj.prop = null;\nconsole.log(obj.prop); // 输出 null\n```\n\n请注意，尝试访问一个已删除的属性将返回`undefined`而不是`null`。",{"_58":917,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/111/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/111/timeline",{"_58":920,"_60":61,"_62":921,"_64":922,"_66":923,"_68":924,"_70":925,"_72":926,"_74":927,"_76":928,"_78":929,"_111":930,"_124":125,"_126":24,"_127":-5,"_128":932,"_130":933,"_152":145,"_146":935,"_148":936,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":937,"_163":938,"_169":939,"_171":940,"_183":942,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/110","https://api.github.com/repos/pro-collection/interview-question/issues/110/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/110/comments","https://api.github.com/repos/pro-collection/interview-question/issues/110/events","https://github.com/pro-collection/interview-question/issues/110",1625624358,"I_kwDOJGDC6c5g5Q8m",110,"样式优先级的规则是什么？",{"_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},[931],{"_70":737,"_72":738,"_58":739,"_117":740,"_119":741,"_121":24,"_122":742},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":934,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-15T14:19:46Z","2023-03-15T14:19:47Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"在 CSS 中，当多个选择器应用于同一个元素并设置了相同的属性时，就会出现样式冲突的问题。此时，CSS 会根据一定的规则来决定哪个样式具有更高的优先级，从而确定最终的样式效果。CSS 样式优先级的规则如下：\n\n1. !important：具有最高优先级，用于强制覆盖其它样式。\n\n2. 内联样式：直接在 HTML 元素的 style 属性中定义的样式，其优先级高于后面提到的其它选择器。\n\n3. ID 选择器：通过 #id 定义的样式，其优先级高于后面提到的 class 选择器和标签选择器。\n\n4. 类选择器、属性选择器、伪类选择器：通过 .class、\\[attribute. 或 :pseudo 定义的样式，其优先级高于后面提到的标签选择器。\n\n5. 标签选择器、伪元素选择器：通过 tagname 或 ::pseudo 定义的样式，优先级最低。\n\n需要注意的是，当出现多个选择器具有相同的优先级时，CSS 会按照样式表中出现的顺序来决定样式的优先级，越后出现的样式会覆盖前面出现的样式。此外，继承自父元素的样式的优先级比上述任何选择器都低。",{"_58":941,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/110/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/110/timeline",{"_58":944,"_60":61,"_62":945,"_64":946,"_66":947,"_68":948,"_70":949,"_72":950,"_74":951,"_76":952,"_78":953,"_111":954,"_124":125,"_126":24,"_127":-5,"_128":956,"_130":957,"_152":188,"_146":959,"_148":960,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":961,"_163":962,"_169":963,"_171":964,"_183":966,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/109","https://api.github.com/repos/pro-collection/interview-question/issues/109/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/109/comments","https://api.github.com/repos/pro-collection/interview-question/issues/109/events","https://github.com/pro-collection/interview-question/issues/109",1625614214,"I_kwDOJGDC6c5g5OeG",109,"JavaScript 有几种方法判断变量的类型（类型检测）？",{"_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},[955],{"_70":493,"_72":494,"_58":495,"_117":496,"_119":497,"_121":24,"_122":498},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":958,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-15T14:13:51Z","2024-01-14T09:54:54Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"\n### JavaScript 中有以下几种方法可以判断变量的类型\n\n- typeof 运算符：可以用于判断基本数据类型（如字符串、数字、布尔值、Undefined 等）和函数类型，但对于对象类型（如数组、日期、正则表达式等）不能准确判断。\n\n- instanceof 运算符：可以用于判断一个对象是否为某个构造函数的实例，但不能判断基本数据类型。\n\n- Object.prototype.toString() 方法：可以返回一个对象的具体类型字符串，可以判断所有数据类型，但需要注意的是需要使用 call 或 apply 方法将要判断的对象传递给 toString 方法。\n\n- Array.isArray() 方法：可以判断一个对象是否为数组类型。\n\n- constructor 属性：可以返回一个对象的构造函数，但需要注意的是 constructor 属性可以被修改，因此不能保证准确性。\n\n\n### 举例 Object.prototype.toString() 是如何判断js 类型的\nObject.prototype.toString() 方法是用来返回当前对象的类型字符串，其实现方式是返回一个类似 \"[object Type]\" 的字符串，其中 Type 是当前对象的类型。\n\n```js\nObject.prototype.toString.call(\"hello\") // \"[object String]\"\nObject.prototype.toString.call(123) // \"[object Number]\"\nObject.prototype.toString.call(true) // \"[object Boolean]\"\nObject.prototype.toString.call(undefined) // \"[object Undefined]\"\nObject.prototype.toString.call(null) // \"[object Null]\"\n\nvar arr = [1, 2, 3];\nObject.prototype.toString.call(arr) // \"[object Array]\"\n\nvar date = new Date();\nObject.prototype.toString.call(date) // \"[object Date]\"\n\nvar reg = /abc/;\nObject.prototype.toString.call(reg) // \"[object RegExp]\"\n\nvar func = function() {};\nObject.prototype.toString.call(func) // \"[object Function]\"\n```\n\n通过这种方式，可以精确判断变量的类型，包括基本数据类型和对象类型。\n\n\n",{"_58":965,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/109/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/109/timeline",{"_58":968,"_60":61,"_62":969,"_64":970,"_66":971,"_68":972,"_70":973,"_72":974,"_74":975,"_76":976,"_78":977,"_111":978,"_124":125,"_126":24,"_127":-5,"_128":980,"_130":981,"_152":145,"_146":983,"_148":984,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":985,"_163":986,"_169":987,"_171":988,"_183":990,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/108","https://api.github.com/repos/pro-collection/interview-question/issues/108/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/108/comments","https://api.github.com/repos/pro-collection/interview-question/issues/108/events","https://github.com/pro-collection/interview-question/issues/108",1625582285,"I_kwDOJGDC6c5g5GrN",108,"手写实现 Promise.allSettled",{"_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},[979],{"_70":493,"_72":494,"_58":495,"_117":496,"_119":497,"_121":24,"_122":498},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_140":982,"_142":219,"_144":145,"_124":125,"_146":220,"_148":221,"_150":-5,"_151":-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-03-15T13:57:05Z","2023-03-15T13:57:06Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"`Promise.allSettled` 方法会接收一个 Promise 数组，并返回一个新的 Promise 对象。该新 Promise 对象会在所有输入的 Promise 都被 resolved 或 rejected 后变为 settled 状态，并且它的值是一个包含所有 Promise 状态的对象数组。\n\n以下是手写实现 `Promise.allSettled` 方法的代码：\n\n```javascript\nfunction allSettled(promises) {\n return new Promise((resolve) => {\n const results = [];\n let settledCount = 0;\n\n promises.forEach((promise, index) => {\n Promise.resolve(promise).then(\n (value) => {\n results[index] = { status: 'fulfilled', value };\n },\n (reason) => {\n results[index] = { status: 'rejected', reason };\n }\n ).finally(() => {\n settledCount++;\n\n if (settledCount === promises.length) {\n resolve(results);\n }\n });\n });\n });\n}\n```\n\n上述代码中，我们首先创建一个新的 Promise 对象，并在其中执行了一个异步操作。然后我们遍历了传入的 Promise 数组，并为每个 Promise 添加了一个 `then` 方法的回调函数，以便在 Promise 状态发生变化时收集 Promise 的结果。对于每个 Promise，我们都使用 `Promise.resolve` 方法将其转换为 Promise 对象，以确保我们处理的是 Promise 对象。我们使用一个 `finally` 方法来在 Promise settled 时更新 settledCount，以确保在所有 Promise settled 后我们只会执行一次 `resolve` 方法。\n\n最终，我们将所有 Promise 的状态都收集到了 `results` 数组中，并将该数组作为 Promise 的值解析。这样，我们就实现了 `Promise.allSettled` 方法的功能。",{"_58":989,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/108/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/108/timeline","pagination",{"_993":994,"_160":995},"value",31,32,"actionData","errors"]