Hello, world!

;\n```\n\n经过编译后，会被转换为类似的 JavaScript 对象：\n```javascript\nconst element = React.createElement(\"h1\", null, \"Hello, world!\");\n```\n\n上述代码中，`React.createElement` 是一个由 React 提供的方法，它接收三个参数：元素的类型、元素的属性（可以是一个对象或 null）、元素的子元素。这样，通过调用 `React.createElement`，JSX 元素就被转换成了一个 JavaScript 对象。\n\n在 React 项目中，Babel 是一个常用的工具，用于将 JSX 代码转换为 JavaScript 代码。Babel 实际上是一个 JavaScript 编译器，可以根据配置和插件，将代码从一种语法转换为另一种语法。\n\n当 Babel 遇到 JSX 代码时，它会使用一个名为 `@babel/preset-react` 的 preset（预设）来进行转换。这个 preset 包含了一系列的插件，用于处理 JSX 语法。\n\n**具体的工作流程如下**：\n\n1. Babel 解析代码：Babel 会将代码解析成抽象语法树（AST），以便于之后的处理。\n\n2. JSX 转换：Babel 使用 `@babel/preset-react` 预设来处理 JSX 代码。这个预设包含了一个插件 `@babel/plugin-transform-react-jsx`，用于将 JSX 转换为函数调用。\n\n 例如，将 `

Hello, world!

` 转换成 `React.createElement(\"h1\", null, \"Hello, world!\")`。\n\n3. 生成 JavaScript 代码：Babel 使用转换后的 AST，将其重新生成为 JavaScript 代码。\n\n 例如，将 `React.createElement(\"h1\", null, \"Hello, world!\")` 转换成实际的 JavaScript 代码。\n\n总结起来，Babel 的作用就是将 JSX 代码转换为 JavaScript 代码，使其能够在浏览器中执行。这样，React 就可以理解和处理 JSX 语法，并通过转换后的 JavaScript 代码来创建虚拟 DOM 和进行后续的更新操作。\n\n\n### 2. 创建虚拟 DOM：React 使用解析后的 JSX 对象来创建虚拟 DOM（Virtual DOM）。虚拟 DOM 是一个轻量级的、以 JavaScript 对象表示的 DOM 树的副本。\n\n**createElement 创建虚拟dom**\n\n在 React 中，`React.createElement` 函数用于创建虚拟 DOM 元素。它接受三个参数：元素类型、属性对象以及子元素。\n\n```javascript\nconst element = React.createElement(type, props, children);\n```\n\n`React.createElement` 函数会返回一个描述虚拟 DOM 元素的 JavaScript 对象。这个对象包含了元素的类型、属性和子元素等信息。例如，对于 `

Hello, React!

` 这个 JSX 语法，它被转换为以下形式：\n\n```javascript\nReact.createElement(\"div\", { className: \"container\" }, \"Hello, React!\");\n```\n\n这样就创建了一个描述 `

` 元素的虚拟 DOM 对象。虚拟 DOM 对象可以通过 `ReactDOM.render` 方法渲染到实际的 DOM 中。当虚拟 DOM 发生变化时，React 会通过比较新旧虚拟 DOM，找出差异并进行局部更新，从而最小化对实际 DOM 的操作。\n\n**createElement 原理**\n\n以下是 React 源码中 `React.createElement` 函数的简化版本：\n\n```javascript\nfunction createElement(type, props, ...children) {\n const element = {\n type,\n props: {\n ...props,\n children: children.map(child =>\n typeof child === 'object' ? child : createTextElement(child)\n )\n }\n };\n \n return element;\n}\n\nfunction createTextElement(text) {\n return {\n type: 'TEXT_ELEMENT',\n props: {\n nodeValue: text,\n children: []\n }\n };\n}\n```\n\n在上面的源码中，`createElement` 函数接收一个 `type` 参数（元素类型）、一个 `props` 参数（元素的属性对象）以及可选的 `children` 参数（子元素）。\n\n首先，通过创建一个名为 `element` 的对象，我们存储了虚拟 DOM 元素的信息。`element` 对象中的 `type` 属性保存了元素的类型，而 `props` 属性则是一个对象，用来存储元素的属性和子元素。我们使用了 ES6 中的扩展运算符将 `props` 参数中的属性分配给 `element.props`，同时也将 `children` 参数中的子元素映射为虚拟 DOM 对象。\n\n对于 `children` 参数的处理，通过 `children.map` 方法遍历 `children` 数组，并对每个子元素执行以下操作：\n\n- 如果子元素是对象类型，即已经是一个虚拟 DOM 对象，直接将其添加到 `element.props.children` 中。\n- 如果子元素是字符串或数字类型，即文本节点，那么我们调用 `createTextElement` 函数来创建一个描述该文本节点的虚拟 DOM 对象，并将其添加到 `element.props.children` 中。\n\n`createTextElement` 函数用于创建文本节点的虚拟 DOM 对象。它返回一个包含 `type` 为 `'TEXT_ELEMENT'` 的对象，且 `props` 对象中的 `nodeValue` 属性保存了文本节点的内容，`children` 属性为空数组。\n\n最后，我们将 `element` 对象作为结果返回，这样就创建了一个描述虚拟 DOM 元素的 JavaScript 对象。\n\n总结起来，`createElement` 函数通过创建一个对象来描述虚拟 DOM 元素，其中包含了元素的类型、属性和子元素等信息。对于子元素，会根据其类型进行判断，如果是对象类型，则直接添加到 `props.children` 中；如果是文本类型，则通过 `createTextElement` 函数创建对应的虚拟 DOM 对象。这样就生成了一个虚拟 DOM 元素，可以用于进行后续的渲染和更新操作。\n\n\n### 3. Diff 算法比较变化：在每次组件更新时，React 使用 Diff 算法对比前后两个虚拟 DOM 树的差异。Diff 算法能够高效地找出需要进行更新的部分。\n\nReact中通过diff算法来比较两个虚拟DOM树的差异，以确定需要更新的最小操作集合。\n\n首先，React会比较两个根节点的类型，如果不同，它们代表不同的组件，React会将原来的组件树完全替换为新的组件树。\n\n如果类型相同，React会比较两个根节点的属性，检查它们是否有任何更改。如果有更改，React会更新已有的DOM元素的属性。\n\n接下来，React会递归地比较和更新子节点。React会通过遍历子节点的方式找到相同位置上的子节点，并进行递归比较。\n\n对于子节点，React使用一种称为\"key\"的特殊属性来判断它们是否是相同的元素。如果两个子节点的key相同，React会认为它们是相同的元素，并只更新它们的属性和子节点。如果key不同，React会将旧的子节点完全替换为新的子节点。\n\n最后，React会将所有需要更新的操作记录下来，并将其发送到浏览器的渲染引擎中执行。这些操作可能包括添加、移动或删除DOM节点。\n\n通过使用diff算法，React可以最小化对真实DOM的操作，提高性能和效率。同时，React还会使用一些启发式策略和优化算法，如批处理和异步更新，来进一步提升性能。\n\n\n### 4. 生成 DOM 更新操作：根据 Diff 算法的比较结果，React 会生成一系列的 DOM 更新操作，包括添加、移除和修改节点等。这些操作被存储在更新队列中。\n\n在React中，生成DOM更新操作的过程可以概括为以下几个步骤：\n\n- 通过diff算法比较新旧虚拟DOM树的差异，得到需要更新的最小操作集合。\n\n- 对于每个需要更新的操作，React会将其转化为一个待执行的DOM更新任务。\n\n- React将这些待执行的DOM更新任务放入一个队列中，等待执行。\n\n- 当React准备执行DOM更新时，会将队列中的任务按照特定的顺序进行执行。这个顺序通常是根据DOM节点的层级和位置来确定的，以保证DOM更新的正确性。\n\n- 执行DOM更新时，React会根据操作的类型，比如添加、移动或删除DOM节点，调用浏览器提供的DOM API来执行相应的操作。\n\n- 在执行DOM更新的过程中，React会尽量优化操作，避免一些不必要的DOM操作。例如，将多个连续的DOM插入操作合并为一次操作，或者将多个DOM删除操作合并为一次操作。\n\n- 执行完所有的DOM更新任务后，React会通知浏览器进行重新渲染，将更新后的DOM树呈现给用户。\n\n总的来说，React通过将虚拟DOM树转化为真实DOM树，并通过diff算法生成DOM更新操作，然后按照特定顺序执行这些操作，最终完成DOM的更新和渲染。这样的设计可以提高性能，减少不必要的DOM操作，并保证DOM的一致性。\n\n\n### 5. 批量进行 DOM 更新：React 会将更新队列中的 DOM 更新操作批量进行，以减少浏览器的重绘和回流操作。React 会通过批量更新来优化性能。\n\nReact通过批量更新的方式来优化DOM操作，以减少不必要的性能开销。\n\n在React中，当需要更新组件状态或属性时，不会立即执行DOM更新操作，而是将更新请求加入到一个待处理的队列中。React会在适当的时机，比如在事件处理函数执行完毕或在生命周期方法结束时，对队列中的更新请求进行批量处理。\n\n具体的批量更新过程如下：\n\n- 在React中，每个组件都有一个内部的pending state队列，用于存储待处理的更新请求。\n\n- 当需要更新组件的状态或属性时，React会将更新请求添加到该组件的pending state队列中。\n\n- 在React的更新过程中，会遍历组件的pending state队列，将其中的所有更新请求合并为一个批量更新。\n\n- React会根据合并后的批量更新，生成最小化的DOM操作集合。\n\n- 最后，React会通过执行这个批量更新的DOM操作集合，将更新应用到真实的DOM树中。\n\n通过批量更新的方式，React可以减少不必要的DOM操作次数，提高性能。同时，React也提供了一些API，让开发者可以手动控制更新的时机，比如使用`setState`的回调函数、使用`ReactDom.unstable_batchedUpdates`方法等。\n\n需要注意的是，React并不保证所有的更新都会批量处理。在一些特殊情况下，比如在事件处理函数中手动调用`setState`，或者使用`ReactDOM.unstable_batchedUpdates`方法，可以强制进行批量更新。但在某些情况下，React可能会选择立即更新，以保证更新的时机和结果的一致性。\n\n### 6. 应用 DOM 更新：最后，React 将批量的 DOM 更新操作应用到实际的浏览器 DOM 中，从而更新用户界面。这个过程中，React 会尽量最小化对真实 DOM 的操作，以提高性能。\n\n原理同上，只是进行了重复操作；\n\n\n### 总结\n\n一图带千言\n\n![image](https://github.com/pro-collection/interview-question/assets/22188674/f24dad99-66fe-4206-9d05-6f7194dcc5b5)\n\n",{"_58":291,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/585/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/585/timeline",{"_58":294,"_60":61,"_62":295,"_64":296,"_66":297,"_68":298,"_70":299,"_72":300,"_74":301,"_76":302,"_78":303,"_111":304,"_131":132,"_133":24,"_134":311,"_136":312,"_158":151,"_152":314,"_154":315,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":316,"_170":317,"_176":318,"_178":319,"_190":321,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/584","https://api.github.com/repos/pro-collection/interview-question/issues/584/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/584/comments","https://api.github.com/repos/pro-collection/interview-question/issues/584/events","https://github.com/pro-collection/interview-question/issues/584",1920792642,"I_kwDOJGDC6c5yfPhC",584,"[React] 从 React 层面上，能做的性能优化有哪些？【热度: 1,005】",{"_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},[305,306],{"_70":210,"_72":211,"_58":212,"_117":213,"_119":214,"_121":24,"_122":215},{"_70":307,"_72":308,"_58":309,"_117":310,"_119":129,"_121":24,"_122":130},5342931240,"LA_kwDOJGDC6c8AAAABPnapKA","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BE%8E%E5%9B%A2","美团",[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":313,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-10-01T14:21:28Z","2023-12-17T09:29:51Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：React性能优化\r\n\r\n从 React 层面上，可以进行以下性能优化：\r\n\r\n1. 使用 memoization（记忆化）：通过使用 React.memo() 或 useMemo() 来避免不必要的重新渲染。这对于纯函数组件和大型组件特别有用。\r\n\r\n2. 使用 shouldComponentUpdate 或 PureComponent：在类组件中，可以通过重写 shouldComponentUpdate 方法或使用 PureComponent 来避免不必要的重新渲染。\r\n\r\n3. 使用 React.lazy 和 Suspense：通过使用 React.lazy 和 Suspense 来按需加载组件，从而减少初始加载时间。\r\n\r\n4. 使用虚拟化：对于大型列表或表格等组件，可以使用虚拟化技术（如 react-window 或 react-virtualized）来仅渲染可见区域内的元素，从而提高性能。\r\n\r\n5. 避免不必要的渲染：在函数组件中，可以使用 useCallback 和 useMemo 来避免不必要的函数创建和计算, 使用 useRef 保持函数应用的唯一性。\r\n\r\n6. 使用 key 属性：在使用列表或动态元素时，确保为每个元素提供唯一的 key 属性，这有助于 React 有效地识别和更新元素。\r\n\r\n7. 使用 React DevTools Profiler：使用 React DevTools Profiler 来分析组件的渲染性能，并找出性能瓶颈。\r\n\r\n8. 使用 React.StrictMode：在开发环境中，可以使用 React.StrictMode 组件来检测潜在的问题和不安全的使用。\r\n\r\n9. 避免深层嵌套：尽量避免过多的组件嵌套，这可能会导致性能下降。\r\n\r\n10. 使用组件分割：将大型组件拆分成多个小组件，可以提高组件的可维护性和性能。\r\n\r\n这些是一些常见的 React 层面上的性能优化技巧，根据具体的应用场景和需求，可能还有其他优化方式。\r\n\r\n参考文档：\r\nhttps://juejin.cn/post/7273427487588925501\r\n",{"_58":320,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/584/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/584/timeline",{"_58":323,"_60":61,"_62":324,"_64":325,"_66":326,"_68":327,"_70":328,"_72":329,"_74":330,"_76":331,"_78":332,"_111":333,"_131":132,"_133":24,"_134":336,"_136":337,"_158":151,"_152":339,"_154":340,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":341,"_170":342,"_176":343,"_178":344,"_190":346,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/583","https://api.github.com/repos/pro-collection/interview-question/issues/583/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/583/comments","https://api.github.com/repos/pro-collection/interview-question/issues/583/events","https://github.com/pro-collection/interview-question/issues/583",1920790790,"I_kwDOJGDC6c5yfPEG",583,"[React] 高阶组件理解多少？【热度: 655】",{"_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},[334,335],{"_70":210,"_72":211,"_58":212,"_117":213,"_119":214,"_121":24,"_122":215},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":338,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-10-01T14:17:34Z","2023-10-01T14:17:48Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：什么是React高阶组件、React高阶组件满足的条件、React高阶组件使用场景\n\n**什么是高阶组件**\n\nReact高阶组件（Higher-Order Component，HOC）是一种用于复用组件逻辑的设计模式。它本质上是一个函数，接受一个组件作为参数，并返回一个新的增强过的组件。\n\n通过使用高阶组件，我们可以将一些通用的功能逻辑抽象出来，并将其应用到多个组件中，从而避免代码重复和逻辑分散的问题。\n\n**React高阶组件需要满足以下条件**：\n\n1. 接受一个组件作为参数：高阶组件函数应该接受一个组件作为参数，并返回一个新的增强过的组件。\n\n2. 返回一个新的组件：高阶组件函数应该在内部创建一个新的组件，并将其返回作为结果。这个新组件可以是一个类组件或函数组件。\n\n3. 传递props：高阶组件应该将传递给它的props传递给原始组件，可以通过使用展开运算符或手动传递props进行传递。\n\n4. 可以修改props：高阶组件可以对传递给原始组件的props进行处理、转换或增加额外的props。\n\n5. 可以访问组件生命周期方法和状态：高阶组件可以在新组件中访问组件的生命周期方法和状态，并根据需要执行逻辑。\n\n**使用场景**\n\nReact高阶组件有以下几个常见的使用场景：\n\n1. 代码复用：当多个组件之间有相同的逻辑和功能时，可以将这些逻辑和功能抽象成一个高阶组件，并在多个组件中使用该高阶组件进行代码复用。\n\n```jsx\nconst withLogging = (WrappedComponent) => {\n return (props) => {\n useEffect(() => {\n console.log('Component is mounted');\n }, []);\n\n return ;\n }\n}\n\nconst MyComponent = withLogging(MyOriginalComponent);\n```\n\n2. 条件渲染：高阶组件可以根据一些条件来决定是否渲染原始组件或其他组件。这对于实现权限控制、用户认证等场景非常有用。\n\n```jsx\nconst withAuthorization = (WrappedComponent) => {\n return (props) => {\n if (props.isAuthenticated) {\n return ;\n } else {\n return

Unauthorized

;\n }\n }\n}\n\nconst MyComponent = withAuthorization(MyOriginalComponent);\n```\n\n3. Props 改变：高阶组件可以监听原始组件的props的变化，并在变化时执行一些逻辑。这对于实现数据的深拷贝、数据的格式化等场景非常有用。\n\n```jsx\nconst withDeepCopy = (WrappedComponent) => {\n return (props) => {\n const prevPropsRef = useRef(props);\n\n useEffect(() => {\n if (prevPropsRef.current.data !== props.data) {\n const copiedData = JSON.parse(JSON.stringify(props.data));\n // Do something with copiedData...\n }\n\n prevPropsRef.current = props;\n }, [props.data]);\n\n return ;\n }\n}\n\nconst MyComponent = withDeepCopy(MyOriginalComponent);\n```\n\n4. 功能增强：高阶组件可以对原始组件的功能进行增强，例如增加表单校验、日志记录、性能优化等。\n\n```jsx\nconst withFormValidation = (WrappedComponent) => {\n return (props) => {\n const [isValid, setValid] = useState(false);\n\n const validateForm = () => {\n // Perform form validation logic...\n setValid(true);\n }\n\n return (\n

\n \n {isValid ?

Form is valid

Form is invalid

}\n

\n );\n }\n}\n\nconst MyComponent = withFormValidation(MyOriginalComponent);\n```\n\n5. 渲染劫持：高阶组件可以在原始组件渲染之前或之后执行一些逻辑，例如在渲染之前进行数据加载，或在渲染之后进行动画效果的添加等。\n\n```jsx\nconst withDataFetching = (WrappedComponent) => {\n return (props) => {\n const [data, setData] = useState(null);\n\n useEffect(() => {\n // Fetch data...\n axios.get('/api/data')\n .then(response => {\n setData(response.data);\n })\n .catch(error => {\n console.error('Error fetching data:', error);\n });\n }, []);\n\n if (data === null) {\n return

;\n } else {\n return ;\n }\n }\n}\n\nconst MyComponent = withDataFetching(MyOriginalComponent);\n```\n\n总的来说，React高阶组件提供了一种灵活的方式来对组件进行组合和功能增强，可以在不修改原始组件的情况下对其进行扩展和定制。\n",{"_58":345,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/583/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/583/timeline",{"_58":348,"_60":61,"_62":349,"_64":350,"_66":351,"_68":352,"_70":353,"_72":354,"_74":355,"_76":356,"_78":357,"_111":358,"_131":132,"_133":24,"_134":361,"_136":362,"_158":151,"_152":364,"_154":365,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":366,"_170":367,"_176":368,"_178":369,"_190":371,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/582","https://api.github.com/repos/pro-collection/interview-question/issues/582/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/582/comments","https://api.github.com/repos/pro-collection/interview-question/issues/582/events","https://github.com/pro-collection/interview-question/issues/582",1920786138,"I_kwDOJGDC6c5yfN7a",582,"[React] Class Components 和 Function Components 有区别？【热度: 229】",{"_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},[359,360],{"_70":210,"_72":211,"_58":212,"_117":213,"_119":214,"_121":24,"_122":215},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":363,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-10-01T14:08:02Z","2023-10-01T14:08:03Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：Class Components 和 Function Components、Class Components 和 Function Components 区别、Class Components 和 Function Components 差异\n\n**概要对比**\n\nClass组件是使用ES6的类语法定义的组件，它是继承自React.Component的一个子类。Class组件有自己的状态和生命周期方法，可以通过`this.state`来管理状态，并通过`this.setState()`来更新状态。\n\n```jsx\nclass Counter extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n count: 0\n };\n }\n\n increment = () => {\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函数组件是使用函数来定义的组件，在React 16.8版本引入的Hooks之后，函数组件可以拥有自己的状态和副作用，可以使用`useState`和其他Hooks来管理状态。\n\n```jsx\nimport React, { useState } from 'react';\n\nfunction Counter() {\n const [count, setCount] = useState(0);\n\n const increment = () => {\n setCount(count + 1);\n };\n\n return (\n

Count: {count}

\n \n

\n );\n}\n```\n\n函数组件通常比Class组件更简洁和易于理解，尤其是在处理简单的逻辑和状态时。然而，Class组件仍然在一些特定情况下有它们的优势，例如需要使用生命周期方法、引入Ref或者需要更多的精确控制和性能优化时。\n\n**细节对比**\n\n| 方面 | Class组件 | 函数组件 |\n| --- | --- | --- |\n| 语法 | 使用ES6类语法定义组件 | 使用函数语法定义组件 |\n| 继承 | 继承自React.Component类 | 无需继承任何类 |\n| 状态管理 | 可通过this.state和this.setState来管理状态 | 可使用useState Hook来管理状态 |\n| 生命周期方法 | 可使用生命周期方法，如componentDidMount、componentDidUpdate等 | 可使用Effect Hook来处理副作用 |\n| Props | 可通过this.props来访问父组件传递的props | 可通过函数参数来访问父组件传递的props |\n| 状态更新 | 使用this.setState来更新状态 | 使用对应的Hook来更新状态 |\n| 内部引用 | 可以通过Ref引用组件实例或DOM元素 | 可以使用Ref Hook引用组件实例或DOM元素 |\n| 性能优化 | 可以使用shouldComponentUpdate来控制组件是否重新渲染 | 可以使用React.memo或useMemo Hook来控制组件是否重新渲染 |\n| 访问上下文 | 可以使用this.context来访问上下文 | 可以使用useContext Hook来访问上下文 |\n\n需要注意的是，这只是一些常见的区别，并不是所有的区别。在实际开发中，具体的区别可能还会根据需求和使用的React版本而有所变化。\n",{"_58":370,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/582/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/582/timeline",{"_58":373,"_60":61,"_62":374,"_64":375,"_66":376,"_68":377,"_70":378,"_72":379,"_74":380,"_76":381,"_78":382,"_111":383,"_131":132,"_133":24,"_134":386,"_136":387,"_158":151,"_152":389,"_154":390,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":391,"_170":392,"_176":393,"_178":394,"_190":396,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/581","https://api.github.com/repos/pro-collection/interview-question/issues/581/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/581/comments","https://api.github.com/repos/pro-collection/interview-question/issues/581/events","https://github.com/pro-collection/interview-question/issues/581",1920783992,"I_kwDOJGDC6c5yfNZ4",581,"[React] 构建组件的方式有哪些【热度: 482】",{"_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},[384,385],{"_70":210,"_72":211,"_58":212,"_117":213,"_119":214,"_121":24,"_122":215},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":388,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-10-01T14:03:45Z","2023-10-01T14:03:46Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：React构建组件方式\n\n1. Class Components（类组件）：使用ES6的类语法来定义组件。类组件继承自`React.Component`，并通过`render`方法返回需要渲染的React元素。\n\n```jsx\nclass MyComponent extends React.Component {\n render() {\n return

Hello

;\n }\n}\n```\n\n2. Function Components（函数组件）：使用函数来定义组件，函数接收`props`作为参数，并返回需要渲染的React元素。\n\n```jsx\nfunction MyComponent(props) {\n return

Hello

;\n}\n```\n\n3. Higher-Order Components（高阶组件）：高阶组件是一个函数，接收一个组件作为参数，并返回一个新的增强组件。它用于在不修改原始组件的情况下，添加额外的功能或逻辑。\n\n```jsx\nfunction withLogger(WrappedComponent) {\n return class extends React.Component {\n componentDidMount() {\n console.log('Component did mount!');\n }\n\n render() {\n return ;\n }\n };\n}\n\nconst EnhancedComponent = withLogger(MyComponent);\n```\n\n4. Function as Children（函数作为子组件）：将函数作为子组件传递给父组件，并通过父组件的props传递数据给子组件。\n\n```jsx\nfunction MyComponent(props) {\n return

{props.children('Hello')}

;\n}\n\n\n {(message) =>

{message}

}\n\n```\n\n这些是React中常见的构建组件的方式。每种方式都适用于不同的场景，你可以根据自己的需求选择合适的方式来构建组件。\n\n\n5. `React.cloneElement`：`React.cloneElement`是一个函数，用于克隆并返回一个新的React元素。它可以用于修改现有元素的props，或者在将父组件的props传递给子组件时进行一些额外的操作。\n\n```jsx\nconst parentElement =

Hello

;\nconst clonedElement = React.cloneElement(parentElement, { className: 'greeting' });\n\n// Result:

Hello

\n```\n\n6. `React.createElement`：`React.createElement`是一个函数，用于创建并返回一个新的React元素。它接收一个类型（组件、HTML标签等）、props和子元素，并返回一个React元素。\n\n```jsx\nconst element = React.createElement('div', { className: 'greeting' }, 'Hello');\n\n// Result:

Hello

\n```\n\n`React.createElement`和`React.cloneElement`通常在一些特殊的场景下使用，例如在高阶组件中对组件进行包装或修改。它们不是常规的组件构建方式，但是在某些情况下是非常有用的。非常抱歉之前的遗漏，希望这次能够更全面地回答您的问题。\n",{"_58":395,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/581/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/581/timeline",{"_58":398,"_60":61,"_62":399,"_64":400,"_66":401,"_68":402,"_70":403,"_72":404,"_74":405,"_76":406,"_78":407,"_111":408,"_131":132,"_133":24,"_134":415,"_136":416,"_158":151,"_152":418,"_154":419,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":420,"_170":421,"_176":422,"_178":423,"_190":425,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/580","https://api.github.com/repos/pro-collection/interview-question/issues/580/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/580/comments","https://api.github.com/repos/pro-collection/interview-question/issues/580/events","https://github.com/pro-collection/interview-question/issues/580",1920777474,"I_kwDOJGDC6c5yfL0C",580,"[React] 如何实现vue 中 keep-alive 的功能？【热度: 255】",{"_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},[409,410],{"_70":210,"_72":211,"_58":212,"_117":213,"_119":214,"_121":24,"_122":215},{"_70":411,"_72":412,"_58":413,"_117":414,"_119":129,"_121":24,"_122":130},5312214934,"LA_kwDOJGDC6c8AAAABPKH3lg","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E6%98%93","网易",[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":417,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-10-01T13:48:54Z","2023-10-01T13:48:55Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：keep-alive组件缓存、keep-alive实现、keep-alive原理\n\n**keep-alive 原理**\n可以参考这个文章： https://github.com/pro-collection/interview-question/issues/119\n\n\n**实现**\n当使用函数式组件时，可以使用React的Hooks来实现类似Vue的``功能。下面是一个使用React函数式组件和Hooks实现类似Vue的``功能的示例：\n\n```jsx\nimport React, { useEffect, useRef } from 'react';\n\nconst withKeepAlive = (WrappedComponent) => {\n const cache = new Map(); // 使用Map来存储缓存的组件实例\n\n return (props) => {\n const { id } = props;\n const componentRef = useRef(null);\n\n useEffect(() => {\n if (!cache.has(id)) {\n cache.set(id, componentRef.current); // 缓存组件实例\n }\n\n return () => {\n cache.delete(id); // 组件销毁时从缓存中移除\n };\n }, [id]);\n\n const cachedInstance = cache.get(id); // 获取缓存的组件实例\n\n if (cachedInstance) {\n return React.cloneElement(cachedInstance.props.children, props); // 渲染缓存的组件实例的子组件\n }\n\n return ; // 初次渲染时渲染原始组件\n };\n};\n```\n\n使用这个高阶函数组件来包裹需要缓存的函数式组件：\n\n```jsx\nconst SomeComponent = (props) => {\n return (\n

Some Component

{props.message}

\n );\n};\n\nconst KeepAliveSomeComponent = withKeepAlive(SomeComponent);\n```\n\n在父组件中使用`KeepAliveSomeComponent`来实现缓存功能：\n\n```jsx\nconst ParentComponent = () => {\n const [showComponent, setShowComponent] = useState(false);\n\n const toggleComponent = () => {\n setShowComponent(!showComponent);\n };\n\n return (\n

\n \n {showComponent && (\n \n )}\n

\n );\n};\n```\n\n在上述示例中，`ParentComponent`包含一个按钮，点击按钮时切换`KeepAliveSomeComponent`的显示与隐藏。每次切换时，`KeepAliveSomeComponent`的状态将保留，因为它被缓存并在需要时重新渲染。\n\n同样地，这个示例只实现了最基本的缓存功能，并没有处理更复杂的场景。如果需要更复杂的缓存功能，可以考虑使用状态管理库来管理组件的状态和缓存。\n",{"_58":424,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/580/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/580/timeline",{"_58":427,"_60":61,"_62":428,"_64":429,"_66":430,"_68":431,"_70":432,"_72":433,"_74":434,"_76":435,"_78":436,"_111":437,"_131":132,"_133":24,"_134":440,"_136":441,"_158":151,"_152":443,"_154":444,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":445,"_170":446,"_176":447,"_178":448,"_190":450,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/579","https://api.github.com/repos/pro-collection/interview-question/issues/579/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/579/comments","https://api.github.com/repos/pro-collection/interview-question/issues/579/events","https://github.com/pro-collection/interview-question/issues/579",1920771704,"I_kwDOJGDC6c5yfKZ4",579,"[Vue] 中为何不要把 v-if 和 v-for 同时用在同一个元素上，原理是什么？【热度: 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},[438,439],{"_70":210,"_72":211,"_58":212,"_117":213,"_119":214,"_121":24,"_122":215},{"_70":411,"_72":412,"_58":413,"_117":414,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":442,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-10-01T13:36:04Z","2023-10-01T13:36:05Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：v-if和v-for性能\n\n确实，将`v-if`和`v-for`同时用在同一个元素上可能会导致性能问题。**原因在于`v-for`具有比`v-if`更高的优先级，它会在每次渲染的时候都会运行**。这意味着，即使在某些情况下`v-if`的条件为`false`，`v-for`仍然会对数据进行遍历和渲染。\n\n这样会导致一些不必要的性能消耗，特别是当数据量较大时。Vue在渲染时会尽量复用已经存在的元素，而不是重新创建和销毁它们。但是当`v-for`遍历的数据项发生变化时，Vue会使用具有相同`key`的元素，此时`v-if`的条件可能会影响到之前的元素，导致一些不符合预期的行为。\n\n让我们来看一个具体的例子来说明这个问题。\n\n假设我们有以下的Vue模板代码：\n\n```html\n

{{ item.name }}

\n```\n\n这里我们使用`v-for`来循环渲染`items`数组，并且使用`v-if`来判断每个数组项是否是活动状态。现在，让我们看一下Vue的源码，特别是与渲染相关的部分。\n\n在Vue的渲染过程中，它会将模板解析为AST（抽象语法树），然后将AST转换为渲染函数。对于上面的模板，渲染函数大致如下：\n\n```javascript\nfunction render() {\n return _c(\n 'ul',\n null,\n _l(items, function(item) {\n return item.isActive ? _c('li', null, _v(_s(item.name))) : _e();\n })\n );\n}\n```\n\n上面的代码中，`_l`是由`v-for`指令生成的渲染函数。它接收一个数组和一个回调函数，并在每个数组项上调用回调函数。回调函数根据`v-if`条件来决定是否渲染`li`元素。\n\n问题出在这里：由于`v-for`的优先级比`v-if`高，所以每次渲染时都会执行`v-for`循环，无论`v-if`的条件是否为`false`。这意味着即使`item.isActive`为`false`，Vue仍然会对它进行遍历和渲染。\n\n此外，Vue在渲染时会尽量复用已经存在的元素，而不是重新创建和销毁它们。但是当`v-for`遍历的数据项发生变化时，Vue会使用具有相同`key`的元素。在上面的例子中，如果`item.isActive`从`true`变为`false`，Vue会尝试复用之前的`li`元素，并在其上应用`v-if`条件。这可能会导致一些不符合预期的行为。\n\n为了避免这种性能问题，Vue官方推荐在同一个元素上不要同时使用`v-if`和`v-for`。如果需要根据条件来决定是否渲染循环的元素，可以考虑使用计算属性或者`v-for`的过滤器来处理数据。或者，将条件判断放在外层元素上，内层元素使用`v-for`进行循环渲染，以确保每次渲染时都能正确地应用`v-if`条件。\n",{"_58":449,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/579/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/579/timeline",{"_58":452,"_60":61,"_62":453,"_64":454,"_66":455,"_68":456,"_70":457,"_72":458,"_74":459,"_76":460,"_78":461,"_111":462,"_131":132,"_133":24,"_134":471,"_136":472,"_158":151,"_152":474,"_154":475,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":476,"_170":477,"_176":478,"_178":479,"_190":481,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/578","https://api.github.com/repos/pro-collection/interview-question/issues/578/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/578/comments","https://api.github.com/repos/pro-collection/interview-question/issues/578/events","https://github.com/pro-collection/interview-question/issues/578",1920672325,"I_kwDOJGDC6c5yeyJF",578,"将静态资源缓存在本地的方式有哪些？【热度: 584】",{"_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},[463,470],{"_70":464,"_72":465,"_58":466,"_117":467,"_119":468,"_121":24,"_122":469},5284642729,"LA_kwDOJGDC6c8AAAABOv0_qQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B7%A5%E7%A8%8B%E5%8C%96","工程化","1d76db","web 项目工程化",{"_70":411,"_72":412,"_58":413,"_117":414,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":473,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-10-01T09:46:23Z","2023-10-01T09:46:24Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：静态资源缓存本地\n\n**浏览器可以使用以下几种方式将前端静态资源缓存在本地**：\n\n1. HTTP缓存：浏览器通过设置HTTP响应头中的Cache-Control或Expires字段来指定资源的缓存策略。常见的缓存策略有：no-cache（每次都请求服务器进行验证）、no-store（不缓存资源）、max-age（设置资源缓存的最大时间）等。浏览器根据这些缓存策略来决定是否将资源缓存在本地。\n\n2. ETag/If-None-Match：服务器可以通过在响应头中添加ETag字段，用于标识资源的版本号。当浏览器再次请求资源时，会将上次请求返回的ETag值通过If-None-Match字段发送给服务器，由服务器判断资源是否发生了变化。如果资源未发生变化，服务器会返回304 Not Modified状态码，浏览器则直接使用本地缓存的资源。\n\n3. Last-Modified/If-Modified-Since：服务器可以通过在响应头中添加Last-Modified字段，用于标识资源的最后修改时间。浏览器再次请求资源时，会将上次请求返回的Last-Modified值通过If-Modified-Since字段发送给服务器。服务器根据资源的最后修改时间判断资源是否发生了变化，如果未发生变化，则返回304 Not Modified状态码，浏览器使用本地缓存的资源。\n\n4. Service Worker缓存：使用Service Worker可以将前端资源缓存在浏览器的Service Worker缓存中。Service Worker是运行在浏览器后台的脚本，它可以拦截和处理网络请求，因此可以将前端资源缓存起来，并在离线状态下提供缓存的资源。\n\n5. LocalStorage或IndexedDB：对于一些小的静态资源，可以将其存储在浏览器的LocalStorage或IndexedDB中。这些存储方式是浏览器提供的本地存储机制，可以将数据以键值对的形式存储在浏览器中，从而实现缓存的效果。\n\n**如何将静态资源缓存在 LocalStorage或IndexedDB**\n\n以下是一个使用LocalStorage将静态资源缓存的示例代码：\n\n```javascript\n// 定义一个数组，包含需要缓存的静态资源的URL\nvar resources = [\n 'https://example.com/css/style.css',\n 'https://example.com/js/main.js',\n 'https://example.com/images/logo.png'\n];\n\n// 遍历资源数组，将资源请求并存储在LocalStorage中\nresources.forEach(function(url) {\n // 发起资源请求\n fetch(url)\n .then(function(response) {\n // 检查请求是否成功\n if (!response.ok) {\n throw new Error('Request failed: ' + response.status);\n }\n // 将响应数据存储在LocalStorage中\n return response.text();\n })\n .then(function(data) {\n // 将资源数据存储在LocalStorage中，以URL作为键名\n localStorage.setItem(url, data);\n console.log('Resource cached: ' + url);\n })\n .catch(function(error) {\n console.error(error);\n });\n});\n```\n\n以下是一个使用IndexedDB将静态资源缓存的示例代码：\n\n```javascript\n// 打开或创建一个IndexedDB数据库\nvar request = indexedDB.open('myDatabase', 1);\n\n// 创建或更新数据库的对象存储空间\nrequest.onupgradeneeded = function(event) {\n var db = event.target.result;\n var objectStore = db.createObjectStore('resources', { keyPath: 'url' });\n objectStore.createIndex('url', 'url', { unique: true });\n};\n\n// 成功打开数据库后，将资源请求并存储在IndexedDB中\nrequest.onsuccess = function(event) {\n var db = event.target.result;\n var transaction = db.transaction('resources', 'readwrite');\n var objectStore = transaction.objectStore('resources');\n\n resources.forEach(function(url) {\n // 发起资源请求\n fetch(url)\n .then(function(response) {\n // 检查请求是否成功\n if (!response.ok) {\n throw new Error('Request failed: ' + response.status);\n }\n // 将响应数据存储在IndexedDB中\n return response.blob();\n })\n .then(function(data) {\n // 创建一个资源对象，以URL作为键名\n var resource = { url: url, data: data };\n // 将资源对象存储在IndexedDB中\n objectStore.put(resource);\n console.log('Resource cached: ' + url);\n })\n .catch(function(error) {\n console.error(error);\n });\n });\n\n // 完成事务\n transaction.oncomplete = function() {\n console.log('All resources cached in IndexedDB.');\n };\n\n transaction.onerror = function(event) {\n console.error('Transaction error:', event.target.error);\n };\n};\n```\n\n以上代码仅为示例，实际应用中需要根据具体的需求进行相应的优化和错误处理。\n",{"_58":480,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/578/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/578/timeline",{"_58":483,"_60":61,"_62":484,"_64":485,"_66":486,"_68":487,"_70":488,"_72":489,"_74":490,"_76":491,"_78":492,"_111":493,"_131":132,"_133":24,"_134":496,"_136":497,"_158":151,"_152":499,"_154":499,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":500,"_170":501,"_176":502,"_178":503,"_190":505,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/577","https://api.github.com/repos/pro-collection/interview-question/issues/577/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/577/comments","https://api.github.com/repos/pro-collection/interview-question/issues/577/events","https://github.com/pro-collection/interview-question/issues/577",1920670252,"I_kwDOJGDC6c5yexos",577,"SPA首屏加载速度慢的怎么解决【热度: 868】",{"_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},[494,495],{"_70":464,"_72":465,"_58":466,"_117":467,"_119":468,"_121":24,"_122":469},{"_70":411,"_72":412,"_58":413,"_117":414,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":498,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-10-01T09:41:30Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：SPA首屏、加快首屏加载\n\n**统计首屏时间**\n\n可以参考下面的文档：\n\n- https://github.com/pro-collection/interview-question/issues/515\n- https://github.com/pro-collection/interview-question/issues/516\n\n**影响首屏可能得因素**\n\n- 网络延时问题\n- 资源文件体积是否过大\n- 资源是否重复发送请求去加载了\n- 加载脚本的时候，渲染内容堵塞了\n\n\n**解决方案**\n\n- 减小入口文件积\n- 静态资源本地缓存\n- UI框架按需加载\n- 图片资源的压缩\n- 组件重复打包\n- 开启 GZip 压缩\n- 使用 SSR\n- 启用 CDN 加速\n",{"_58":504,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/577/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/577/timeline",{"_58":507,"_60":61,"_62":508,"_64":509,"_66":510,"_68":511,"_70":512,"_72":513,"_74":514,"_76":515,"_78":516,"_111":517,"_131":132,"_133":24,"_134":524,"_136":525,"_158":151,"_152":527,"_154":528,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":529,"_170":530,"_176":531,"_178":532,"_190":534,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/576","https://api.github.com/repos/pro-collection/interview-question/issues/576/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/576/comments","https://api.github.com/repos/pro-collection/interview-question/issues/576/events","https://github.com/pro-collection/interview-question/issues/576",1920662984,"I_kwDOJGDC6c5yev3I",576,"[Vue] 为什么 data 属性是一个函数而不是一个对象？【热度: 448】",{"_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},[518,519],{"_70":210,"_72":211,"_58":212,"_117":213,"_119":214,"_121":24,"_122":215},{"_70":520,"_72":521,"_58":522,"_117":523,"_119":129,"_121":24,"_122":130},5562711972,"LA_kwDOJGDC6c8AAAABS5A_pA","https://api.github.com/repos/pro-collection/interview-question/labels/Shopee","Shopee",[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":526,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-10-01T09:23:56Z","2023-10-01T09:31:47Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：vue data 函数\n\n**实例和组件定义data的区别**\n\n`vue` 实例的时候定义`data`属性既可以是一个对象，也可以是一个函数\n\n```js\nconst app = new Vue({\n el: \"#app\",\n // 对象格式\n data: {\n foo: \"foo\"\n },\n // 函数格式\n data() {\n return {\n foo: \"foo\"\n }\n }\n})\n```\n\n组件中定义data属性，只能是一个函数\n\n如果为组件data直接定义为一个对象\n\n```js\nVue.component('component1', {\n template: `

组件

`,\n data: {\n foo: \"foo\"\n }\n})\n```\n\n则会得到警告信息\n\n警告说明：返回的data应该是一个函数在每一个组件实例中\n\n**组件data定义函数与对象的区别**\n\n上面讲到组件data必须是一个函数，不知道大家有没有思考过这是为什么呢？\n\n在我们定义好一个组件的时候，vue最终都会通过Vue.extend()构成组件实例\n\n这里我们模仿组件构造函数，定义data属性，采用对象的形式\n\n```js\nfunction Component() {\n\n}\n\nComponent.prototype.data = {\n count: 0\n}\n```\n\n创建两个组件实例\n\n```js\nconst componentA = new Component()\nconst componentB = new Component()\n```\n\n产生这样的原因这是两者共用了同一个内存地址，componentA修改的内容，同样对componentB产生了影响\n\n如果我们采用函数的形式，则不会出现这种情况（函数返回的对象内存地址并不相同）\n\n```js\nfunction Component() {\n this.data = this.data()\n}\n\nComponent.prototype.data = function() {\n return {\n count: 0\n }\n}\n```\n\n修改componentA组件data属性的值，componentB中的值不受影响\n\n```js\nconsole.log(componentB.data.count) // 0\ncomponentA.data.count = 1\nconsole.log(componentB.data.count) // 0\n```\n\nvue组件可能会有很多个实例，采用函数返回一个全新data形式，使每个实例对象的数据不会受到其他实例对象数据的污染\n\n**原理分析**\n\n首先可以看看vue初始化data的代码，data的定义可以是函数也可以是对象\n\n源码位置：`/vue-dev/src/core/instance/state.js`\n\n```js\nfunction initData(vm: Component) {\n let data = vm.$options.data\n data = vm._data = typeof data === 'function'\n ? getData(data, vm)\n : data || {}\n // ...\n}\n```\n\n`data`既能是`object`也能是`function`，那为什么还会出现上文警告呢？\n\n别急，继续看下文\n\n组件在创建的时候，会进行选项的合并\n\n源码位置：`/vue-dev/src/core/util/options.js`\n\n自定义组件会进入`mergeOptions`进行选项合并\n\n```ts\nVue.prototype._init = function(options?: Object) {\n // ...\n // merge options\n if (options && options._isComponent) {\n // optimize internal component instantiation\n // since dynamic options merging is pretty slow, and none of the\n // internal component options needs special treatment.\n initInternalComponent(vm, options)\n } else {\n vm.$options = mergeOptions(\n resolveConstructorOptions(vm.constructor),\n options || {},\n vm\n )\n }\n // ...\n}\n```\n\n定义data会进行数据校验\n\n源码位置：`/vue-dev/src/core/instance/init.js`\n\n这时候`vm`实例为`undefined`，进入if判断，若`data`类型不是`function`，则出现警告提示\n\n```tsx\nstrats.data = function(\n parentVal: any,\n childVal: any,\n vm?: Component\n): Function {\n if (!vm) {\n if (childVal && typeof childVal !== \"function\") {\n process.env.NODE_ENV !== \"production\" &&\n warn(\n 'The \"data\" option should be a function ' +\n \"that returns a per-instance value in component \" +\n \"definitions.\",\n vm\n );\n\n return parentVal;\n }\n return mergeDataOrFn(parentVal, childVal);\n }\n return mergeDataOrFn(parentVal, childVal, vm);\n};\n```\n\n**结论**\n- 根实例对象`data`可以是对象也可以是函数（根实例是单例），不会产生数据污染情况\n- 组件实例对象`data`必须为函数，目的是为了防止多个组件实例对象之间共用一个`data`，产生数据污染。采用函数的形式，`initData`时会将其作为工厂函数都会返回全新`data`对象\n",{"_58":533,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/576/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/576/timeline",{"_58":536,"_60":61,"_62":537,"_64":538,"_66":539,"_68":540,"_70":541,"_72":542,"_74":543,"_76":544,"_78":545,"_111":546,"_131":132,"_133":24,"_134":555,"_136":556,"_158":151,"_152":558,"_154":559,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":560,"_170":561,"_176":562,"_178":563,"_190":565,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/575","https://api.github.com/repos/pro-collection/interview-question/issues/575/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/575/comments","https://api.github.com/repos/pro-collection/interview-question/issues/575/events","https://github.com/pro-collection/interview-question/issues/575",1920655823,"I_kwDOJGDC6c5yeuHP",575,"XHR 和 Fetch 是否支持取消请求【热度: 122】",{"_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},[547,554],{"_70":548,"_72":549,"_58":550,"_117":551,"_119":552,"_121":24,"_122":553},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","网络","1A8829","web 网络相关",{"_70":217,"_72":218,"_58":219,"_117":220,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":557,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-10-01T09:07:06Z","2023-10-01T09:24:37Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：XHR 取消请求、Fetch 取消请求\r\n\r\n**XHR 支持取消请求**\r\n\r\nXHR（XMLHttpRequest）对象支持取消请求。你可以使用 `xhr.abort()` 方法来取消正在进行的请求。\r\n\r\n下面是一个使用 XHR 取消请求的示例代码：\r\n\r\n```javascript\r\nconst xhr = new XMLHttpRequest();\r\nxhr.open('GET', 'https://api.example.com/data', true);\r\nxhr.send();\r\n\r\n// 取消请求\r\nxhr.abort();\r\n```\r\n\r\n使用 `xhr.abort()` 方法会导致 XHR 请求被中止，并触发 `abort` 事件。\r\n\r\n需要注意的是，取消请求后，XHR 对象将不再可用，不能再使用已经取消的 XHR 对象发送新的请求。\r\n\r\n\r\n**Fetch API 原生不提供直接的方法来取消请求。然而，你可以使用 AbortController 来实现取消 fetch 请求的功能。**\r\n\r\nAbortController 是一个用于控制和取消异步操作的 API，它可以与 fetch 一起使用来取消网络请求。下面是一个使用 AbortController 来取消 fetch 请求的示例代码：\r\n\r\n```javascript\r\nconst controller = new AbortController();\r\nconst signal = controller.signal;\r\n\r\nfetch('https://api.example.com/data', { signal })\r\n .then(response => {\r\n // 处理响应\r\n })\r\n .catch(error => {\r\n if (error.name === 'AbortError') {\r\n console.log('请求被取消');\r\n } else {\r\n console.log('发生错误', error);\r\n }\r\n });\r\n\r\n// 取消请求\r\ncontroller.abort();\r\n```\r\n\r\n在上面的代码中，我们创建了一个 AbortController 对象，并从中获取一个 signal 信号。然后，将 signal 信号传递给 fetch 请求的 options 参数中。当调用 `controller.abort()` 方法时，fetch 请求会被取消，并且会触发一个 `AbortError` 错误。\r\n\r\n需要注意的是，AbortController 是一个较新的 API，不是所有浏览器都完全支持。为了确保在不支持 AbortController 的情况下仍能取消 fetch 请求，你可以使用 polyfill 或使用第三方库（如 Axios）来实现取消功能。\r\n",{"_58":564,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/575/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/575/timeline",{"_58":567,"_60":61,"_62":568,"_64":569,"_66":570,"_68":571,"_70":572,"_72":573,"_74":574,"_76":575,"_78":576,"_111":577,"_131":132,"_133":24,"_134":580,"_136":581,"_158":151,"_152":583,"_154":584,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":585,"_170":586,"_176":587,"_178":588,"_190":590,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/574","https://api.github.com/repos/pro-collection/interview-question/issues/574/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/574/comments","https://api.github.com/repos/pro-collection/interview-question/issues/574/events","https://github.com/pro-collection/interview-question/issues/574",1920649319,"I_kwDOJGDC6c5yeshn",574,"axios 是如何区分是 nodejs 环境还是浏览器环境的？【热度: 113】",{"_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},[578,579],{"_70":548,"_72":549,"_58":550,"_117":551,"_119":552,"_121":24,"_122":553},{"_70":217,"_72":218,"_58":219,"_117":220,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":582,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-10-01T08:51:30Z","2023-10-01T08:51:45Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：nodejs与浏览器环境判定\n\nAxios 是一个跨平台的 HTTP 客户端库，可以在浏览器和 Node.js 中使用。Axios 通过判断当前环境来确定是在浏览器还是在 Node.js 环境中运行。\n\n在浏览器环境中，Axios 默认会使用浏览器提供的 XMLHttpRequest 对象来发送 HTTP 请求。\n\n在 Node.js 环境中，**Axios 会检查是否存在 `process` 全局对象，以及 `process` 对象中是否存在 `nextTick` 方法**。如果存在以上两个条件，Axios 就默认在 Node.js 环境中运行，并使用 Node.js 内置的 `http` 模块发送 HTTP 请求。\n\n如果需要明确指定运行环境，可以使用 `axios.defaults.adapter` 属性来设置适配器（adapter），以便在需要时手动选择使用 XMLHttpRequest 或 Node.js 内置的 `http` 模块。\n\n例如，在 Node.js 环境中可以这样设置适配器：\n\n```javascript\nconst axios = require('axios');\nconst httpAdapter = require('axios/lib/adapters/http');\n\naxios.defaults.adapter = httpAdapter;\n```\n\n通过上述方式，Axios 可以根据环境自动选择适当的底层实现来发送 HTTP 请求，使其在不同的环境中都能正常工作。\n",{"_58":589,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/574/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/574/timeline",{"_58":592,"_60":61,"_62":593,"_64":594,"_66":595,"_68":596,"_70":597,"_72":598,"_74":599,"_76":600,"_78":601,"_111":602,"_131":132,"_133":24,"_134":605,"_136":606,"_158":151,"_152":608,"_154":609,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":610,"_170":611,"_176":612,"_178":613,"_190":615,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/573","https://api.github.com/repos/pro-collection/interview-question/issues/573/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/573/comments","https://api.github.com/repos/pro-collection/interview-question/issues/573/events","https://github.com/pro-collection/interview-question/issues/573",1920648008,"I_kwDOJGDC6c5yesNI",573,"axios 有哪些特性？【热度: 464】",{"_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},[603,604],{"_70":548,"_72":549,"_58":550,"_117":551,"_119":552,"_121":24,"_122":553},{"_70":217,"_72":218,"_58":219,"_117":220,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":607,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-10-01T08:48:07Z","2023-10-01T09:01:10Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：axios特性\r\n\r\n直接可以参考官网链接： https://axios-http.com/docs/intro\r\n\r\n特点\r\n- 从浏览器创建XMLHttpRequest\r\n- 从node.js生成http请求\r\n- 支持 Promise API\r\n- 拦截请求和响应\r\n- 转换请求和响应数据\r\n- 取消请求\r\n- 超时时间\r\n- 支持嵌套项的查询参数序列化\r\n- 自动请求体序列化为:\r\n - JSON (应用程序/ison)\r\n - 多部分/表格数据 (多部分/表格数据)\r\n - URL编码形式 (申请书/x-www-form-urlencoded )\r\n- 以JSON格式发布HTML表单\r\n- 响应中的自动JSON数据处理\r\n- 为浏览器和node.js捕获进度，附带额外信息 (速度、剩余时间)\r\n- 设置node.is的带宽限制\r\n- 兼容符合规范的FormData和Blob (包括节点) js)\r\n- 客户端对XSRF的保护支持\r\n",{"_58":614,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/573/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/573/timeline",{"_58":617,"_60":61,"_62":618,"_64":619,"_66":620,"_68":621,"_70":622,"_72":623,"_74":624,"_76":625,"_78":626,"_111":627,"_131":132,"_133":24,"_134":634,"_136":635,"_158":151,"_152":637,"_154":638,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":639,"_170":640,"_176":641,"_178":642,"_190":644,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/572","https://api.github.com/repos/pro-collection/interview-question/issues/572/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/572/comments","https://api.github.com/repos/pro-collection/interview-question/issues/572/events","https://github.com/pro-collection/interview-question/issues/572",1920641960,"I_kwDOJGDC6c5yequo",572,"如何拦截 web 应用的请求【热度: 487】",{"_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},[628,629],{"_70":548,"_72":549,"_58":550,"_117":551,"_119":552,"_121":24,"_122":553},{"_70":630,"_72":631,"_58":632,"_117":633,"_119":129,"_121":24,"_122":130},5597058003,"LA_kwDOJGDC6c8AAAABTZxT0w","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%BF%AB%E6%89%8B","快手",[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":636,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-10-01T08:33:19Z","2023-10-01T08:34:35Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：web前端监听请求、前端拦截请求\r\n\r\n在前端拦截和处理 Web 应用的所有请求，可以使用以下方法：\r\n\r\n\r\n1. **使用 Fetch 或 XMLHttpRequest**：在前端代码中使用 Fetch API 或 XMLHttpRequest 对象发送请求。通过拦截 Fetch 或 XMLHttpRequest 对象的 open 和 send 方法，可以在请求发出前进行拦截和修改。这样可以捕获请求的相关信息，并进行相应的处理。\r\n\r\n示例代码（使用 Fetch API）：\r\n\r\n```javascript\r\nconst originalFetch = window.fetch;\r\nwindow.fetch = function (url, options) {\r\n // 在请求发出前进行拦截和处理\r\n console.log('拦截到请求:', url);\r\n \r\n // 可以修改请求的相关信息\r\n // options.headers['Authorization'] = 'Bearer token';\r\n \r\n return originalFetch.apply(this, arguments);\r\n};\r\n```\r\n\r\n\r\n2. **使用 Service Worker：Service Worker** 是一种在浏览器背后运行的脚本，可以拦截和处理网络请求。通过注册一个 Service Worker，可以在其中监听和处理请求事件。从而实现拦截和处理 Web 应用的所有请求。\r\n\r\n示例代码：\r\n\r\n```javascript\r\nself.addEventListener('fetch', function(event) {\r\n // 在请求发出前进行拦截和处理\r\n console.log('拦截到请求:', event.request.url);\r\n \r\n // 可以修改请求的相关信息\r\n // event.request.headers.set('Authorization', 'Bearer token');\r\n \r\n event.respondWith(fetch(event.request));\r\n});\r\n```\r\n\r\n需要注意的是，前端拦截和处理请求只能在客户端进行，对于服务器端的请求无法拦截。此外，拦截和处理请求可能会对性能产生一定的影响，因此要根据实际情况进行权衡和调优。同时，对于一些敏感信息（如密码、个人信息等），应该谨慎处理，确保安全性。\r\n\r\n\r\n3. **如果是使用是三方请求库，比如 aixos** ，可以直接使用三方库提供的能力\r\n\r\n是的，使用 axios 也可以拦截请求。axios 提供了拦截器（interceptors）的功能，可以在请求发出前进行拦截和处理。\r\n\r\n示例代码：\r\n\r\n```javascript\r\nimport axios from 'axios';\r\n\r\n// 请求拦截器\r\naxios.interceptors.request.use(function (config) {\r\n // 在请求发出前进行拦截和处理\r\n console.log('拦截到请求:', config.url);\r\n \r\n // 可以修改请求的相关信息\r\n // config.headers['Authorization'] = 'Bearer token';\r\n \r\n return config;\r\n}, function (error) {\r\n return Promise.reject(error);\r\n});\r\n\r\n// 发送请求\r\naxios.get('/api/data')\r\n .then(function (response) {\r\n console.log(response.data);\r\n })\r\n .catch(function (error) {\r\n console.error(error);\r\n });\r\n```\r\n在上述代码中，通过使用 `interceptors.request` 方法，可以对请求进行拦截和处理。在拦截器函数中，可以修改请求的相关信息，并返回修改后的配置对象。\r\n\r\n使用 axios 拦截请求只能在客户端进行，对服务器端的请求无法拦截。同样需要谨慎处理敏感信息，并确保安全性。\r\n",{"_58":643,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/572/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/572/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":659,"_136":660,"_158":151,"_152":662,"_154":663,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":664,"_170":665,"_176":666,"_178":667,"_190":669,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/571","https://api.github.com/repos/pro-collection/interview-question/issues/571/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/571/comments","https://api.github.com/repos/pro-collection/interview-question/issues/571/events","https://github.com/pro-collection/interview-question/issues/571",1919294096,"I_kwDOJGDC6c5yZhqQ",571,"[Vue] 动态给 data 添加一个新的属性时会发生什么【热度: 164】",{"_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,658],{"_70":210,"_72":211,"_58":212,"_117":213,"_119":214,"_121":24,"_122":215},{"_70":520,"_72":521,"_58":522,"_117":523,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":661,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-29T13:40:12Z","2023-09-29T13:40:13Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：vue更改data属性\n\n**直接添加属性的问题**\n\n我们从一个例子开始\n\n定义一个`p`标签，通过`v-for`指令进行遍历\n\n然后给`botton`标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也新增一行\n\n```vue\n\n\n```\n\n实例化一个`vue`实例，定义`data`属性和`methods`方法\n\n```js\nconst app = new Vue({\n el: \"#app\",\n data: () => {\n item:{\n oldProperty:\"旧属性\"\n }\n },\n methods: {\n addProperty() {\n this.items.newProperty = \"新属性\" // 为items添加新属性\n console.log(this.items) // 输出带有newProperty的items\n }\n }\n})\n```\n\n点击按钮，发现结果不及预期，数据虽然更新了（console打印出了新属性），但页面并没有更新\n\n**原理分析**\n\n为什么产生上面的情况呢？\n\n下面来分析一下\n\n`vue2`是用过`Object.defineProperty`实现数据响应式\n\n```js\nconst obj = {}\nObject.defineProperty(obj, 'foo', {\n get() {\n console.log(`get foo:${val}`);\n return val\n },\n set(newVal) {\n if (newVal !== val) {\n console.log(`set foo:${newVal}`);\n val = newVal\n }\n }\n})\n```\n\n当我们访问`foo`属性或者设置`foo`值的时候都能够触发`setter与getter`\n\n```js\nobj.foo \nobj.foo = 'new'\n```\n\n但是我们为`obj`添加新属性的时候，却无法触发事件属性的拦截\n\n```js\nobj.bar = '新属性'\n```\n\n原因是一开始`obj`的`foo`属性被设成了响应式数据，而`bar`是后面新增的属性，并没有通过`Object.defineProperty`设置成响应式数据\n\n**解决方案**\n\n`Vue` 不允许在已经创建的实例上动态添加新的响应式属性\n\n若想实现数据与视图同步更新，可采取下面三种解决方案：\n\n- `Vue.set()`\n- `Object.assign()`\n- `$forcecUpdated()`\n\n**`Vue.set()`**\n\n`Vue.set( target, propertyName/index, value )`\n\n参数\n\n- `{Object | Array} target`\n- `{string | number} propertyName/index`\n- `{any} value`\n\n返回值：设置的值\n\n通过`Vue.set`向响应式对象中添加一个`property`，并确保这个新 `property` 同样是响应式的，且触发视图更新\n\n关于`Vue.set`源码（省略了很多与本节不相关的代码）\n\n源码位置：`src\\core\\observer\\index.js`\n```js\nfunction set (target: Array | Object, key: any, val: any): any {\n ...\n defineReactive(ob.value, key, val)\n ob.dep.notify()\n return val\n}\n```\n\n这里无非再次调用 `defineReactive` 方法，实现新增属性的响应式\n\n关于 `defineReactive` 方法，内部还是通过 `Object.defineProperty` 实现属性拦截\n\n```js\nfunction defineReactive(obj, key, val) {\n Object.defineProperty(obj, key, {\n get() {\n console.log(`get ${key}:${val}`);\n return val\n },\n set(newVal) {\n if (newVal !== val) {\n console.log(`set ${key}:${newVal}`);\n val = newVal\n }\n }\n })\n}\n```\n\n**`Object.assign()`**\n\n直接使用Object.assign()添加到对象的新属性不会触发更新\n\n应创建一个新的对象，合并原对象和混入对象的属性\n```js\nthis.someObject = Object.assign({},this.someObject,{newProperty1:1,newProperty2:2 ...})\n```\n\n**`$forceUpdate`**\n\n如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况，是你在某个地方做错了事\n\n`$forceUpdate` 迫使 Vue 实例重新渲染\n\nPS：仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。\n\n**小结**\n\n如果为对象添加少量的新属性，可以直接采用`Vue.set()`\n\n如果需要为新对象添加大量的新属性，则通过`Object.assign()`创建新对象\n\n如果你实在不知道怎么操作时，可采取`$forceUpdate()`进行强制刷新 (不建议)\n",{"_58":668,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/571/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/571/timeline",{"_58":671,"_60":61,"_62":672,"_64":673,"_66":674,"_68":675,"_70":676,"_72":677,"_74":678,"_76":679,"_78":680,"_111":681,"_131":132,"_133":24,"_134":690,"_136":691,"_158":151,"_152":703,"_154":703,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":704,"_170":705,"_176":706,"_178":707,"_190":709,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/570","https://api.github.com/repos/pro-collection/interview-question/issues/570/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/570/comments","https://api.github.com/repos/pro-collection/interview-question/issues/570/events","https://github.com/pro-collection/interview-question/issues/570",1919211406,"I_kwDOJGDC6c5yZNeO",570,"Object 对象有哪些场景 api ？【热度: 509】",{"_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},[682,689],{"_70":683,"_72":684,"_58":685,"_117":686,"_119":687,"_121":24,"_122":688},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","JavaScript","A4D8FB","JavaScript 语法部分",{"_70":411,"_72":412,"_58":413,"_117":414,"_119":129,"_121":24,"_122":130},[],{"_58":692,"_68":693,"_62":694,"_70":695,"_72":696,"_74":196,"_76":697,"_122":698,"_146":699,"_148":700,"_150":151,"_131":132,"_152":701,"_154":702,"_156":-5,"_157":-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-09-29T12:46:39Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：Object对象api\n\n| 方法/属性 | 描述 |\n| ------------------------------ | ------------------------------------------------------------ |\n| `Object.keys(obj)` | 返回一个由给定对象的所有可枚举自身属性的名称组成的数组 |\n| `Object.values(obj)` | 返回一个给定对象所有可枚举属性值的数组 |\n| `Object.entries(obj)` | 返回一个给定对象自身可枚举属性的 [key, value] 数组 |\n| `Object.assign(target, ...sources)` | 将一个或多个源对象的可枚举属性复制到目标对象，并返回目标对象 |\n| `Object.create(proto, [propertiesObject])` | 使用指定的原型对象和属性创建一个新对象 |\n| `Object.defineProperty(obj, prop, descriptor)` | 定义对象中的新属性或修改现有属性的配置 |\n| `Object.getOwnPropertyDescriptor(obj, prop)` | 返回指定对象上一个自有属性对应的属性描述符 |\n| `Object.freeze(obj)` | 冻结一个对象，使其属性无法修改、添加或删除 |\n| `Object.is(value1, value2)` | 判断两个值是否相同 |\n| `Object.seal(obj)` | 封闭一个对象，防止向对象添加新属性，但允许修改或删除现有属性 |\n| `Object.getPrototypeOf(obj)` | 返回指定对象的原型（`__proto__`） |\n| `Object.setPrototypeOf(obj, proto)` | 设置指定对象的原型（`__proto__`） |\n",{"_58":708,"_181":143,"_182":143,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/570/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/570/timeline",{"_58":711,"_60":61,"_62":712,"_64":713,"_66":714,"_68":715,"_70":716,"_72":717,"_74":718,"_76":719,"_78":720,"_111":721,"_131":132,"_133":24,"_134":734,"_136":735,"_158":151,"_152":737,"_154":738,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":739,"_170":740,"_176":741,"_178":742,"_190":744,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/569","https://api.github.com/repos/pro-collection/interview-question/issues/569/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/569/comments","https://api.github.com/repos/pro-collection/interview-question/issues/569/events","https://github.com/pro-collection/interview-question/issues/569",1910294687,"I_kwDOJGDC6c5x3Mif",569,"前端有哪些跨页面通信方式？【热度: 791】",{"_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},[722,729],{"_70":723,"_72":724,"_58":725,"_117":726,"_119":727,"_121":24,"_122":728},5312047129,"LA_kwDOJGDC6c8AAAABPJ9oGQ","https://api.github.com/repos/pro-collection/interview-question/labels/web%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF","web应用场景","EA4E1E","应用场景类问题",{"_70":730,"_72":731,"_58":732,"_117":733,"_119":129,"_121":24,"_122":130},5316900032,"LA_kwDOJGDC6c8AAAABPOl0wA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BA%AC%E4%B8%9C","京东",[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":736,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-24T16:24:05Z","2023-09-24T16:24:38Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"在前端中，有多种跨页面通信的方式，下面列举了其中一些常见的方式：\r\n\r\n1. **使用URL参数**：可以通过URL参数在不同页面之间传递数据。例如，可以在URL中添加查询字符串参数来传递数据，并通过解析URL参数来获取传递的数据。\r\n\r\n2. **使用localStorage或sessionStorage**：可以使用浏览器的本地存储（localStorage或sessionStorage）在不同页面之间共享数据。一个页面可以将数据存储在本地存储中，另一个页面可以读取该数据。\r\n\r\n3. **使用Cookies**：可以使用Cookies在不同页面之间共享数据。一个页面可以将数据存储在Cookie中，另一个页面可以读取该Cookie。\r\n\r\n4. **使用postMessage API**：postMessage API允许不同窗口或iframe之间进行跨页面通信。可以使用postMessage发送消息，接收方可以通过监听message事件来接收消息。\r\n\r\n5. **使用Broadcast Channel API**：Broadcast Channel API允许不同页面或不同浏览器标签之间进行广播式的消息传递。可以使用Broadcast Channel发送消息，其他订阅同一频道的页面都可以接收到消息。\r\n\r\n6. **使用Shared Worker**：Shared Worker是一种特殊的Web Worker，可以在多个页面之间共享。可以通过Shared Worker进行通信和共享数据。\r\n\r\n7. **使用WebSocket**：WebSocket是一种双向通信协议，可以在不同页面之间建立持久的连接，实现实时的跨页面通信。\r\n\r\n以上是一些常见的跨页面通信方式，选择适合自己需求的方式来实现跨页面通信。\r\n",{"_58":743,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/569/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/569/timeline",{"_58":746,"_60":61,"_62":747,"_64":748,"_66":749,"_68":750,"_70":751,"_72":752,"_74":753,"_76":754,"_78":755,"_111":756,"_131":132,"_133":24,"_134":764,"_136":765,"_158":151,"_152":767,"_154":767,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":768,"_170":769,"_176":770,"_178":771,"_190":773,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/568","https://api.github.com/repos/pro-collection/interview-question/issues/568/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/568/comments","https://api.github.com/repos/pro-collection/interview-question/issues/568/events","https://github.com/pro-collection/interview-question/issues/568",1910291617,"I_kwDOJGDC6c5x3Lyh",568,"实现日期格式化 format 函数【热度: 489】",{"_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},[757,758],{"_70":411,"_72":412,"_58":413,"_117":414,"_119":129,"_121":24,"_122":130},{"_70":759,"_72":760,"_58":761,"_117":762,"_119":468,"_121":24,"_122":763},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","代码实现/算法","代码实现或者算法实现",[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":766,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-24T16:14:06Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：日期format函数、日期format实现\n\n**问题**\n```ts\n// js 实现日期的 format 函数\n//\n// YYYY 对应年\n// MM 对应月\n// DD 对应日\n//\n// HH 对应 24 小时制度\n// hh 对应 12 小时制度\n// mm 对应分钟\n// ss 对应秒\n\nconst date = new Date();\nconst formattedDate = date.format('YYYY-MM-DD HH:mm:ss');\nconsole.log(formattedDate); // 输出结果为当前日期和时间的格式化字符串\n```\n\n\n**解答**\n以下是使用JavaScript实现日期格式化的`format`函数：\n\n```javascript\nDate.prototype.format = function (format) {\n const date = this;\n\n const year = date.getFullYear();\n const month = date.getMonth() + 1;\n const day = date.getDate();\n const hours = date.getHours();\n const minutes = date.getMinutes();\n const seconds = date.getSeconds();\n\n format = format.replace('YYYY', year);\n format = format.replace('MM', month.toString().padStart(2, '0'));\n format = format.replace('DD', day.toString().padStart(2, '0'));\n format = format.replace('HH', hours.toString().padStart(2, '0'));\n format = format.replace('hh', (hours % 12).toString().padStart(2, '0'));\n format = format.replace('mm', minutes.toString().padStart(2, '0'));\n format = format.replace('ss', seconds.toString().padStart(2, '0'));\n\n return format;\n};\n\n// 示例用法\nconst date = new Date();\nconst formattedDate = date.format('YYYY-MM-DD HH:mm:ss');\nconsole.log(formattedDate); // 输出结果为当前日期和时间的格式化字符串\n```\n\n上述代码中，我们通过在`Date`对象的原型上定义`format`函数，使得所有的`Date`对象都可以调用`format`函数进行日期格式化。在函数内部，我们使用`getFullYear`、`getMonth`、`getDate`等方法获取日期的年、月、日、时、分、秒的值，并将其替换到传入的`format`字符串中对应的占位符。最后返回格式化后的字符串。\n",{"_58":772,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/568/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/568/timeline",{"_58":775,"_60":61,"_62":776,"_64":777,"_66":778,"_68":779,"_70":780,"_72":781,"_74":782,"_76":783,"_78":784,"_111":785,"_131":132,"_133":24,"_134":788,"_136":789,"_158":151,"_152":791,"_154":791,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":792,"_170":793,"_176":794,"_178":795,"_190":797,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/567","https://api.github.com/repos/pro-collection/interview-question/issues/567/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/567/comments","https://api.github.com/repos/pro-collection/interview-question/issues/567/events","https://github.com/pro-collection/interview-question/issues/567",1910290192,"I_kwDOJGDC6c5x3LcQ",567,"实现一个函数，计算两个日期之间的天数差",{"_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},[786,787],{"_70":411,"_72":412,"_58":413,"_117":414,"_119":129,"_121":24,"_122":130},{"_70":759,"_72":760,"_58":761,"_117":762,"_119":468,"_121":24,"_122":763},[],{"_58":692,"_68":693,"_62":694,"_70":695,"_72":696,"_74":196,"_76":697,"_122":698,"_146":790,"_148":700,"_150":151,"_131":132,"_152":701,"_154":702,"_156":-5,"_157":-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-24T16:09:44Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"以下是使用JavaScript实现计算两个日期之间的天数差的函数：\n\n```javascript\nfunction calculateDateDifference(date1, date2) {\n // 将日期字符串转换为 Date 对象\n const d1 = new Date(date1);\n const d2 = new Date(date2);\n\n // 计算两个日期的时间差（毫秒数）\n const timeDiff = Math.abs(d2.getTime() - d1.getTime());\n\n // 将时间差转换为天数\n const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));\n\n return daysDiff;\n}\n\n// 示例用法\nconst date1 = '2022-01-01';\nconst date2 = '2022-01-10';\n\nconst difference = calculateDateDifference(date1, date2);\nconsole.log(difference); // 输出结果为 9\n```\n\n上述函数首先将两个日期字符串转换为Date对象，然后计算两个日期对象之间的时间差（以毫秒表示），最后将时间差转换为天数。通过调用`calculateDateDifference`函数，可以获取两个日期之间的天数差。\n",{"_58":796,"_181":196,"_182":196,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/567/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/567/timeline",{"_58":799,"_60":61,"_62":800,"_64":801,"_66":802,"_68":803,"_70":804,"_72":805,"_74":806,"_76":807,"_78":808,"_111":809,"_131":132,"_133":24,"_134":812,"_136":813,"_158":196,"_152":815,"_154":816,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":817,"_170":818,"_176":819,"_178":820,"_190":822,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/566","https://api.github.com/repos/pro-collection/interview-question/issues/566/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/566/comments","https://api.github.com/repos/pro-collection/interview-question/issues/566/events","https://github.com/pro-collection/interview-question/issues/566",1910283387,"I_kwDOJGDC6c5x3Jx7",566,"https 如何保证安全的？【热度: 782】",{"_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},[810,811],{"_70":548,"_72":549,"_58":550,"_117":551,"_119":552,"_121":24,"_122":553},{"_70":411,"_72":412,"_58":413,"_117":414,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":814,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-24T16:00:12Z","2023-09-24T16:01:39Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：https 安全性\r\n\r\nHTTPS相比HTTP更安全的原因主要有以下几点：\r\n\r\n1. 数据传输加密：HTTPS使用SSL/TLS协议对数据进行加密传输，通过使用对称密钥加密传输数据，并使用非对称密钥进行身份验证和密钥交换。这意味着即使攻击者截获了数据包，也无法解密其中的内容。\r\n\r\n2. 身份验证和数据完整性：HTTPS使用数字证书对网站进行身份验证，确保用户连接的是正确的网站。同时，数字证书也用于确保数据的完整性，以防止数据在传输过程中被篡改。\r\n\r\n3. 防止中间人攻击：HTTPS通过使用公钥加密和数字签名等技术，可以防止中间人攻击。中间人攻击是指攻击者在用户与服务器之间插入自己的恶意代理，在两者之间进行通信并窃取敏感信息。\r\n\r\n4. HTTP头隐私保护：HTTPS可以提供对HTTP头信息的隐私保护，防止攻击者通过分析HTTP头信息获取用户的敏感信息。\r\n\r\nHTTPS通过数据加密、身份验证和数据完整性保护等机制，提供了更高的安全性，能够有效防止数据被窃取、篡改和中间人攻击等风险。相比之下，HTTP是明文传输，不具备这些安全保护机制。因此，对于需要保护用户隐私和防止数据被攻击的网站，使用HTTPS是更安全的选择。\r\n\r\n",{"_58":821,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/566/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/566/timeline",{"_58":824,"_60":61,"_62":825,"_64":826,"_66":827,"_68":828,"_70":829,"_72":830,"_74":831,"_76":832,"_78":833,"_111":834,"_131":132,"_133":24,"_134":837,"_136":838,"_158":151,"_152":840,"_154":841,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":842,"_170":843,"_176":844,"_178":845,"_190":847,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/565","https://api.github.com/repos/pro-collection/interview-question/issues/565/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/565/comments","https://api.github.com/repos/pro-collection/interview-question/issues/565/events","https://github.com/pro-collection/interview-question/issues/565",1910279937,"I_kwDOJGDC6c5x3I8B",565,"CSS 如何实现文本溢出？【热度: 382】",{"_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},[835,836],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":520,"_72":521,"_58":522,"_117":523,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":839,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-24T15:49:21Z","2023-09-24T15:49:22Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：文本溢出样式\n\n\n**单行文本溢出**\n\n在CSS中，可以使用`text-overflow`属性来实现单行文本的溢出省略样式。同时，还需要设置`white-space`属性为`nowrap`，使文本不换行，以及`overflow`属性为`hidden`，隐藏溢出的文本。\n\n以下是一个示例：\n\n```css\n.ellipsis {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n```\n\n然后，在HTML中，可以将这个类应用到指定的元素上：\n\n```html\n

这是一段很长的文本，如果超过指定的宽度，就会显示省略号。

\n```\n\n这样，如果文本超过了指定的宽度，就会自动显示省略号。\n\n----------------\n\n**多行文本溢出**\n\nCSS中没有直接的属性可以实现省略样式。但是，可以使用一些技巧来实现多行文本的省略样式。其中一种常用的方法是使用`-webkit-line-clamp`属性和`-webkit-box-orient`属性来限制显示的行数，并且设置`display`属性为`-webkit-box`以创建一个块级容器。\n\n以下是一个示例：\n\n```css\n.ellipsis-multiline {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3; /* 设置显示的行数 */\n overflow: hidden;\n text-overflow: ellipsis;\n}\n```\n\n然后，在HTML中，将这个类应用到指定的元素上：\n\n```html\n

\n 这是一个多行文本的示例，如果文本内容超过了指定的行数，就会显示省略号。这是一个多行文本的示例，如果文本内容超过了指定的行数，就会显示省略号。这是一个多行文本的示例，如果文本内容超过了指定的行数，就会显示省略号。\n

\n```\n\n请注意，`-webkit-line-clamp`属性只在某些WebKit浏览器中（如Chrome和Safari）支持。在其他浏览器中，可能需要使用其他解决方案来实现多行文本的省略样式。\n",{"_58":846,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/565/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/565/timeline",{"_58":849,"_60":61,"_62":850,"_64":851,"_66":852,"_68":853,"_70":854,"_72":855,"_74":856,"_76":857,"_78":858,"_111":859,"_131":132,"_133":24,"_134":862,"_136":863,"_158":151,"_152":865,"_154":865,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":866,"_170":867,"_176":868,"_178":869,"_190":871,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/564","https://api.github.com/repos/pro-collection/interview-question/issues/564/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/564/comments","https://api.github.com/repos/pro-collection/interview-question/issues/564/events","https://github.com/pro-collection/interview-question/issues/564",1910278106,"I_kwDOJGDC6c5x3Ifa",564,"JavaScript 中，隐藏类是什么概念？【热度: 146】",{"_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},[860,861],{"_70":683,"_72":684,"_58":685,"_117":686,"_119":687,"_121":24,"_122":688},{"_70":411,"_72":412,"_58":413,"_117":414,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":864,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-24T15:43:30Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：JavaScript隐藏类\n\n隐藏类是JavaScript引擎中的一种优化技术，用于提高对象访问的性能。隐藏类是一种数据结构，用于跟踪对象的属性和方法的布局和类型，以便在代码运行时能够快速访问它们。\n\n当JavaScript引擎在执行代码时，会动态地创建对象的隐藏类。隐藏类会跟踪对象的属性和方法，并为它们分配固定的内存偏移量。每当对象的属性和方法发生变化时，隐藏类会根据变化的情况进行更新。\n\n使用隐藏类可以提高代码的执行速度，因为JavaScript引擎可以根据隐藏类的信息来直接定位和访问对象的属性和方法，而不需要进行动态查找或解析。这种优化技术可以减少对象访问的开销，提高代码的性能。\n\n需要注意的是，隐藏类是在运行时动态创建的，因此代码中创建对象的顺序和属性的添加顺序都会影响隐藏类的生成。如果对象的属性添加顺序不一致，可能会导致隐藏类的生成不一致，从而降低代码的性能。\n\n隐藏类是现代JavaScript引擎（如V8、SpiderMonkey等）中的一项重要优化技术，可以显著提高JavaScript代码的执行速度。\n\n\n下面是一个使用隐藏类的简单示例：\n\n```javascript\nfunction MyClass(a, b) {\n this.prop1 = a;\n this.prop2 = b;\n}\n\nMyClass.prototype.method1 = function() {\n console.log(\"Method 1\");\n};\n\nMyClass.prototype.method2 = function() {\n console.log(\"Method 2\");\n};\n\nvar obj1 = new MyClass(10, 20);\nvar obj2 = new MyClass(30, 40);\n\nobj1.method1(); // 输出 \"Method 1\"\nobj2.method2(); // 输出 \"Method 2\"\n```\n\n在上面的示例中，我们创建了一个名为`MyClass`的类，它有两个属性`prop1`和`prop2`，以及两个方法`method1`和`method2`。我们用`new`关键字创建了两个实例`obj1`和`obj2`。\n\n当我们使用隐藏类优化的JavaScript引擎运行这段代码时，它会动态地创建隐藏类来跟踪`MyClass`的属性和方法。每个实例都会有一个关联的隐藏类，它包含了实例的属性和方法的布局和类型信息。\n\n在调用`obj1.method1()`和`obj2.method2()`时，JavaScript引擎会使用隐藏类的信息来直接定位并执行相应的方法，而不需要进行动态查找和解析，从而提高了代码的执行速度。\n\n需要注意的是，这只是一个简单的示例，实际上隐藏类的优化是更复杂和细致的。不同的引擎可能会有不同的隐藏类实现方式，并且隐藏类的生成和优化过程会受到许多因素的影响，如代码的结构、对象的属性访问模式等。\n",{"_58":870,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/564/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/564/timeline",{"_58":873,"_60":61,"_62":874,"_64":875,"_66":876,"_68":877,"_70":878,"_72":879,"_74":880,"_76":881,"_78":882,"_111":883,"_131":132,"_133":24,"_134":886,"_136":887,"_158":151,"_152":889,"_154":889,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":890,"_170":891,"_176":892,"_178":893,"_190":895,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/563","https://api.github.com/repos/pro-collection/interview-question/issues/563/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/563/comments","https://api.github.com/repos/pro-collection/interview-question/issues/563/events","https://github.com/pro-collection/interview-question/issues/563",1910277593,"I_kwDOJGDC6c5x3IXZ",563,"JavaScript 如何做内存管理？【热度: 603】",{"_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},[884,885],{"_70":683,"_72":684,"_58":685,"_117":686,"_119":687,"_121":24,"_122":688},{"_70":411,"_72":412,"_58":413,"_117":414,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":888,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-24T15:41:49Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：JavaScript内存管理\n\nJavaScript中的内存管理是由垃圾收集器负责的。垃圾收集器会自动追踪不再使用的对象，并在适当的时候释放它们占用的内存。\n\nJavaScript的垃圾收集器使用了一种称为\"**标记-清除**\"（mark and sweep）的算法来确定哪些对象是不再需要的。该算法通过标记所有被引用的对象，然后清除未被标记的对象。\n\n以下是JavaScript中的一些内存管理的原则和技巧：\n\n1. 自动内存管理：JavaScript的垃圾收集器会自动管理内存，不需要手动释放内存。你只需确保不再使用的对象没有被引用，垃圾收集器会在适当的时候自动回收内存。\n\n2. 避免全局变量：全局变量会一直存在于内存中，直到页面关闭。尽量减少使用全局变量，而是使用函数作用域或模块化的方式来限制变量的作用范围。\n\n3. 及时释放引用：当你不再需要一个对象时，最好将对它的引用设置为null，这样可以使垃圾收集器更早地释放对象所占用的内存。\n\n4. 避免循环引用：如果对象之间存在循环引用，即使它们已经不再被使用，垃圾收集器也不会自动释放它们。确保及时断开循环引用，使垃圾收集器能够正确地回收内存。\n\n5. 避免大量对象的创建和销毁：频繁地创建和销毁大量对象会导致垃圾收集器频繁地执行，影响性能。如果可能的话，尽量重用对象，而不是频繁地创建和销毁它们。\n\n虽然JavaScript的垃圾收集器自动管理内存，但仍然需要开发人员编写高效的代码来避免内存泄漏和浪费，以确保JavaScript应用程序的性能和可靠性。\n",{"_58":894,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/563/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/563/timeline",{"_58":897,"_60":61,"_62":898,"_64":899,"_66":900,"_68":901,"_70":902,"_72":903,"_74":904,"_76":905,"_78":906,"_111":907,"_131":132,"_133":24,"_134":910,"_136":911,"_158":151,"_152":913,"_154":914,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":915,"_170":916,"_176":917,"_178":918,"_190":920,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/562","https://api.github.com/repos/pro-collection/interview-question/issues/562/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/562/comments","https://api.github.com/repos/pro-collection/interview-question/issues/562/events","https://github.com/pro-collection/interview-question/issues/562",1910274282,"I_kwDOJGDC6c5x3Hjq",562,"JavaScript 和 BOM、DOM 、ECMAScript、Nodejs 之间是什么关系",{"_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},[908,909],{"_70":683,"_72":684,"_58":685,"_117":686,"_119":687,"_121":24,"_122":688},{"_70":217,"_72":218,"_58":219,"_117":220,"_119":129,"_121":24,"_122":130},[],{"_58":692,"_68":693,"_62":694,"_70":695,"_72":696,"_74":196,"_76":697,"_122":698,"_146":912,"_148":700,"_150":151,"_131":132,"_152":701,"_154":702,"_156":-5,"_157":-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-24T15:31:05Z","2023-09-24T15:53:12Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**ECMAScript**\r\n\r\n`ECMAScript`是`JavaScript`的标准化规范，它定义了`JavaScript`的语法、数据类型、函数、控制流等。`ECMAScript`最早在1997年发布，由欧洲计算机制造商协会（ECMA）负责制定和维护。\r\n\r\n`ECMAScript`的目的是为了确保不同厂商的`JavaScript`实现在语法和行为方面保持一致性，以便开发者能够轻松地编写跨平台、跨浏览器的`JavaScript`代码。标准化的`ECMAScript`规范使得开发者可以在不同的`JavaScript`环境中编写相同的代码，而不必担心语法差异和行为不一致性。\r\n\r\n`ECMAScript`规范每年进行一次更新，新版本通常包含了新的语法特性、API和改进。在每个`ECMAScript`版本发布之前，由各个浏览器厂商先行实现并测试新特性，然后将其添加到浏览器中。这就是为什么不同浏览器可能对同一版本的`ECMAScript`支持程度不同的原因。\r\n\r\n常见的`ECMAScript`版本包括ES5（2009年发布）、ES6（2015年发布，也被称为ES2015）、ES7（2016年发布，也被称为ES2016）等。每个版本都引入了新的语法和功能，使得`JavaScript`变得更加强大和灵活。开发者可以根据目标浏览器的支持情况选择使用不同版本的`ECMAScript`特性。\r\n\r\n\r\n**JavaScript**是一种高级编程语言，用于为网页添加交互和动态功能。它实现了ECMAScript标准，该标准定义了`JavaScript`的语法、数据类型、函数、控制流等。`JavaScript`是一种解释性脚本语言，代码在运行时由浏览器解析和执行。\r\n\r\n**BOM**（Browser Object Model）是浏览器对象模型，它提供了与浏览器交互的API。`BOM`并不是ECMAScript的一部分，而是浏览器厂商自行实现的一组对象和方法。通过`BOM`，开发者可以操作浏览器窗口、解析URL、发送HTTP请求、控制浏览器历史记录等。其中最常见的`BOM`对象是window对象，它代表了浏览器的窗口或框架。\r\n\r\n**DOM**（Document Object Model）是文档对象模型，它定义了用于访问和操作HTML、XML等文档的API。`DOM`提供了一组对象和方法，用于表示文档的结构和内容。通过`DOM`，开发者可以通过`JavaScript`动态地创建、修改和删除HTML元素，修改样式和属性，处理事件等。`DOM`也不是ECMAScript的一部分，而是由浏览器厂商实现的标准。\r\n\r\n**Node.js**是一个基于V8引擎的`JavaScript`运行时环境，使`JavaScript`可以在服务器端运行。与浏览器中的`JavaScript`不同，`Node.js`提供了一组基于事件驱动的API，用于构建高性能和可伸缩的网络应用程序。`Node.js`可以执行文件操作、网络通信、数据库访问等服务器端任务，并且可以通过包管理器npm安装和管理第三方模块。\r\n\r\n总结来说，`JavaScript`是一种编程语言，实现了ECMAScript标准。`BOM`和`DOM`是浏览器提供的API，用于与浏览器交互并操作文档。`Node.js`是一个独立的运行时环境，使`JavaScript`可以在服务器端运行，并提供了一组用于构建网络应用程序的API。\r\n",{"_58":919,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/562/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/562/timeline",{"_58":922,"_60":61,"_62":923,"_64":924,"_66":925,"_68":926,"_70":927,"_72":928,"_74":929,"_76":930,"_78":931,"_111":932,"_131":132,"_133":24,"_134":935,"_136":936,"_158":151,"_152":938,"_154":939,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":940,"_170":941,"_176":942,"_178":943,"_190":945,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/561","https://api.github.com/repos/pro-collection/interview-question/issues/561/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/561/comments","https://api.github.com/repos/pro-collection/interview-question/issues/561/events","https://github.com/pro-collection/interview-question/issues/561",1899359745,"I_kwDOJGDC6c5xNe4B",561,"weakSet 是什么数据结构，有什么应用场景【热度: 161】",{"_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},[933,934],{"_70":683,"_72":684,"_58":685,"_117":686,"_119":687,"_121":24,"_122":688},{"_70":217,"_72":218,"_58":219,"_117":220,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":937,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-16T08:46:05Z","2023-09-16T08:46:18Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：weakSet 数据、weakSet 结构、weakSet 作用\n\nWeakSet 是一种特殊的集合数据结构，它只能存储对象引用，并且这些对象是弱引用。WeakSet 中的对象是被弱引用的，意味着如果没有其他引用指向这个对象，垃圾回收机制就会自动将其回收，即使该对象存在于 WeakSet 中。与 Set 不同，WeakSet 不支持迭代和遍历。\n\n**API**\n\nWeakSet 提供了以下几个常用的 API：\n\n1. `add(value)`：向 WeakSet 中添加一个值。\n\n2. `delete(value)`：从 WeakSet 中删除指定的值。\n\n3. `has(value)`：判断 WeakSet 中是否存在指定的值，返回一个布尔值。\n\n需要注意的是，WeakSet 不支持迭代和遍历操作，所以没有类似于 Set 的 `keys()`、`values()`、`entries()` 或 `forEach()` 等方法。同时，WeakSet 也没有类似于 Set 的 `size` 属性来获取 WeakSet 中的元素个数。\n\n另外，WeakSet 是一个构造函数，可以使用 `new WeakSet()` 来创建一个空的 WeakSet。\n\n\n**使用场景**\n\nWeakSet 的主要应用场景是在需要存储对象集合，并且不希望这些对象的存在阻止它们被垃圾回收时使用。一些常见的使用场景包括：\n\n1. 对象存储：WeakSet 可以用来存储一组对象，并且不会阻止这些对象被垃圾回收。这在需要跟踪一组对象，但又不希望这些对象阻止被释放时很有用。\n\n2. 数据缓存：由于 WeakSet 中的对象是弱引用的，当对象从其他地方被删除时，它们会自动从 WeakSet 中移除。这在需要缓存一些对象，但又希望能够自动清理不再需要的对象时很有用。\n\n需要注意的是，由于 WeakSet 中的对象是弱引用的，所以不能通过遍历或迭代来访问 WeakSet 中的对象。同时，WeakSet 也不提供像 Set 那样的方法，无法判断对象是否存在于 WeakSet 中。\n",{"_58":944,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/561/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/561/timeline",{"_58":947,"_60":61,"_62":948,"_64":949,"_66":950,"_68":951,"_70":952,"_72":953,"_74":954,"_76":955,"_78":956,"_111":957,"_131":132,"_133":24,"_134":964,"_136":965,"_158":151,"_152":967,"_154":968,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":969,"_170":970,"_176":971,"_178":972,"_190":974,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/560","https://api.github.com/repos/pro-collection/interview-question/issues/560/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/560/comments","https://api.github.com/repos/pro-collection/interview-question/issues/560/events","https://github.com/pro-collection/interview-question/issues/560",1899356939,"I_kwDOJGDC6c5xNeML",560,"splice 和 slice 有什么区别？【热度: 282】",{"_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},[958,959],{"_70":683,"_72":684,"_58":685,"_117":686,"_119":687,"_121":24,"_122":688},{"_70":960,"_72":961,"_58":962,"_117":963,"_119":129,"_121":24,"_122":130},5748783891,"LA_kwDOJGDC6c8AAAABVqd7Ew","https://api.github.com/repos/pro-collection/interview-question/labels/%E6%BB%B4%E6%BB%B4","滴滴",[],{"_58":692,"_68":693,"_62":694,"_70":695,"_72":696,"_74":196,"_76":697,"_122":698,"_146":966,"_148":700,"_150":151,"_131":132,"_152":701,"_154":702,"_156":-5,"_157":-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-16T08:36:55Z","2023-09-16T08:36:56Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：Array 方法 splice、Array 方法 slice、splice 和 slice 区别\n\n`splice()` 和 `slice()` 是 JavaScript 中用于操作数组的两个方法，它们的功能和用法有一些区别。\n\n1. `splice()` 方法：\n - 功能：从数组中添加、删除或替换元素。\n - 用法：`array.splice(start, deleteCount, item1, item2, ...)`。\n - 参数：\n - `start`：表示修改的起始位置的下标。\n - `deleteCount`：可选参数，表示要删除的元素数量。\n - `item1, item2, ...`：可选参数，表示要添加到数组的元素。\n - 返回值：返回一个被删除元素组成的数组。\n\n2. `slice()` 方法：\n - 功能：从数组中提取指定范围内的元素，返回一个新的数组。\n - 用法：`array.slice(start, end)`。\n - 参数：\n - `start`：可选参数，表示提取的起始位置的下标。\n - `end`：可选参数，表示提取的结束位置的下标（不包含该位置的元素）。\n - 返回值：返回一个新的数组，包含提取出的元素。\n\n主要区别：\n- `splice()` 方法会对原数组进行修改，而 `slice()` 方法不会修改原数组，而是返回一个新的数组。\n- `splice()` 方法可以在指定位置添加、删除或替换元素，而 `slice()` 方法只能提取指定范围内的元素。\n- `splice()` 方法返回被删除的元素组成的数组，而 `slice()` 方法返回一个新的数组。\n\n总结：\n- 如果需要修改原数组，并且需要添加、删除或替换元素，可以使用 `splice()` 方法。\n- 如果只是需要提取指定范围内的元素，并且不想修改原数组，可以使用 `slice()` 方法。\n",{"_58":973,"_181":196,"_182":196,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/560/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/560/timeline",{"_58":976,"_60":61,"_62":977,"_64":978,"_66":979,"_68":980,"_70":981,"_72":982,"_74":983,"_76":984,"_78":985,"_111":986,"_131":132,"_133":24,"_134":989,"_136":990,"_158":151,"_152":992,"_154":993,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":994,"_170":995,"_176":996,"_178":997,"_190":999,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/559","https://api.github.com/repos/pro-collection/interview-question/issues/559/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/559/comments","https://api.github.com/repos/pro-collection/interview-question/issues/559/events","https://github.com/pro-collection/interview-question/issues/559",1899355642,"I_kwDOJGDC6c5xNd36",559,"什么是匿名函数？【热度: 275】",{"_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},[987,988],{"_70":683,"_72":684,"_58":685,"_117":686,"_119":687,"_121":24,"_122":688},{"_70":630,"_72":631,"_58":632,"_117":633,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":991,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-16T08:32:24Z","2023-09-16T08:32:25Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：匿名函数\n\n在JavaScript中，匿名函数是一种没有名称的函数。它是一种可以直接被定义和使用的函数，而不需要通过函数名进行引用。匿名函数通常用于需要临时定义一个函数并在某个地方立即调用它的情况下使用。\n\n匿名函数可以使用两种方式进行定义：函数表达式和箭头函数。\n\n1. 函数表达式：\n ```javascript\n var func = function() {\n // 函数的代码块\n };\n ```\n 在上述代码中，我们定义了一个没有名称的函数，并将其赋值给了变量`func`。这个函数可以通过`func`变量进行调用。\n\n2. 箭头函数：\n ```javascript\n var func = () => {\n // 函数的代码块\n };\n ```\n 箭头函数是ES6引入的一种简化的函数表达式。它使用箭头（=>）来定义函数，并且没有自己的this值，继承了外层作用域的this值。\n\n匿名函数常用于以下场景：\n\n- 作为回调函数：匿名函数可以作为参数传递给其他函数，并在需要的时候被调用，例如事件处理函数、定时器回调等。\n- 自执行函数：匿名函数可以在定义后立即调用，避免在全局作用域中定义过多的变量。\n- 模块化开发：匿名函数可以用于封装私有变量和方法，实现模块化的开发和避免变量名冲突。\n\n需要注意的是，由于匿名函数没有名字，所以在调试和异常追踪时可能会比较困难，因此在开发中建议给函数命名，以提高代码的可读性和可维护性。\n\n\n**追问: function 是匿名函数吗?**\n\n在JavaScript中，`function`关键字用于定义函数，而不是匿名函数。`function`关键字后面可以跟一个函数名，用于定义具名函数，也可以省略函数名，定义匿名函数。\n\n具名函数示例：\n```javascript\nfunction add(a, b) {\n return a + b;\n}\n```\n上述代码中的`add`函数是一个具名函数，可以通过函数名`add`进行引用和调用。\n\n匿名函数示例：\n```javascript\nvar sum = function(a, b) {\n return a + b;\n};\n```\n上述代码中的`sum`是一个匿名函数，它没有名称，但可以通过变量`sum`进行引用和调用。\n\n可以看到，具名函数和匿名函数的区别在于函数名的存在与否。具名函数可以在函数内部和外部通过函数名进行引用和调用，而匿名函数则需要通过赋值给变量或作为参数传递给其他函数来引用和调用。\n\n需要注意的是，在使用函数表达式定义匿名函数时，函数名是可选的，但在使用函数声明定义具名函数时，函数名是必需的，且函数声明的语法要求将函数名和函数体写在一起。\n",{"_58":998,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/559/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/559/timeline",{"_58":1001,"_60":61,"_62":1002,"_64":1003,"_66":1004,"_68":1005,"_70":1006,"_72":1007,"_74":1008,"_76":1009,"_78":1010,"_111":1011,"_131":132,"_133":24,"_134":1014,"_136":1015,"_158":151,"_152":1017,"_154":1017,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":1018,"_170":1019,"_176":1020,"_178":1021,"_190":1023,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/558","https://api.github.com/repos/pro-collection/interview-question/issues/558/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/558/comments","https://api.github.com/repos/pro-collection/interview-question/issues/558/events","https://github.com/pro-collection/interview-question/issues/558",1899353164,"I_kwDOJGDC6c5xNdRM",558,"git 中回滚代码有哪些操作？【热度: 237】",{"_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},[1012,1013],{"_70":464,"_72":465,"_58":466,"_117":467,"_119":468,"_121":24,"_122":469},{"_70":630,"_72":631,"_58":632,"_117":633,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":1016,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-16T08:26:22Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：git 回滚代码、git reset 操作、git revert 操作\n\n在 Git 中，可以使用以下几种操作来回滚代码：\n\n1. git revert：使用 git revert 命令可以创建一个新的提交来撤销之前的提交。它会创建一个新的提交，恢复之前的更改，从而回滚代码。这种方式比较安全，不会改变历史提交记录。\n\n2. git reset --soft：使用 git reset --soft 命令可以将当前分支的 HEAD 指向指定的提交，同时保留修改。这将撤销指定提交之后的所有提交，但是保留更改的文件在暂存区中，可以用于回滚代码并重新提交。\n\n3. git reset --mixed（默认操作）：使用 git reset --mixed 命令可以将当前分支的 HEAD 指向指定的提交，同时取消之后的提交，但保留修改。这将撤销指定提交之后的所有提交，并重置暂存区的内容，但是不改变工作区的内容，可以用于回滚代码并重新修改后重新提交。\n\n4. git reset --hard：使用 git reset --hard 命令可以将当前分支的 HEAD 指向指定的提交，并丢弃之后的修改。这将撤销指定提交之后的所有提交，并重置工作区和暂存区的内容，慎用，会永久丢失未提交的修改。\n\n需要注意的是，git revert 会保留之前提交的历史记录，而 git reset 则会直接修改历史提交记录。因此，在多人协作或者公共仓库中，建议使用 git revert 来回滚代码，以避免对他人代码的影响。在个人项目或者正在开发中的分支中，可以使用 git reset 更灵活地回滚代码。\n",{"_58":1022,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/558/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/558/timeline",{"_58":1025,"_60":61,"_62":1026,"_64":1027,"_66":1028,"_68":1029,"_70":1030,"_72":1031,"_74":1032,"_76":1033,"_78":1034,"_111":1035,"_131":132,"_133":24,"_134":1038,"_136":1039,"_158":151,"_152":1041,"_154":1042,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":1043,"_170":1044,"_176":1045,"_178":1046,"_190":1048,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/557","https://api.github.com/repos/pro-collection/interview-question/issues/557/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/557/comments","https://api.github.com/repos/pro-collection/interview-question/issues/557/events","https://github.com/pro-collection/interview-question/issues/557",1899352568,"I_kwDOJGDC6c5xNdH4",557,"git reset 作用是啥，有哪些操作？【热度: 275】",{"_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},[1036,1037],{"_70":464,"_72":465,"_58":466,"_117":467,"_119":468,"_121":24,"_122":469},{"_70":630,"_72":631,"_58":632,"_117":633,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":1040,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-16T08:24:15Z","2023-09-16T08:24:16Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：git reset 作用、git reset 操作\n\ngit reset 是一个用于撤销提交的命令，可以将当前分支指向某个特定的提交，同时可以选择是否修改工作区和暂存区。\n\n常见的 git reset 操作有以下三种：\n\n1. git reset --soft ：将当前分支的 HEAD 指向指定的 commit，并保留之后的修改。这种方式不改变工作区和暂存区的内容，可以用于撤销之前的提交，重新修改后重新提交。\n\n2. git reset --mixed （默认操作）：将当前分支的 HEAD 指向指定的 commit，并取消之后的提交，但保留修改。这种方式会重置暂存区的内容，但不改变工作区的内容，可以用于撤销之前的提交，重新修改后重新提交。\n\n3. git reset --hard ：将当前分支的 HEAD 指向指定的 commit，并丢弃之后的修改。这种方式会重置工作区和暂存区的内容，慎用，会永久丢失未提交的修改。\n\n除了上述操作之外，还可以搭配使用 git reset 的其他选项和参数。其中，可以是一个提交的哈希值、分支名或者标签名，用于指定要回退到的提交。\n",{"_58":1047,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/557/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/557/timeline","pagination",{"_1051":1052,"_167":1053},"value",18,32,"actionData","errors"]