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":445,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"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":448,"_60":61,"_62":449,"_64":450,"_66":451,"_68":452,"_70":453,"_72":454,"_74":455,"_76":456,"_78":457,"_111":458,"_138":139,"_140":24,"_141":-5,"_142":461,"_144":462,"_166":159,"_160":464,"_162":465,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":466,"_177":467,"_183":468,"_185":469,"_197":471,"_199":-5,"_200":-5,"_201":202},"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},[459,460],{"_70":216,"_72":217,"_58":218,"_117":219,"_119":220,"_121":24,"_122":221},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":463,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：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":470,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"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":473,"_60":61,"_62":474,"_64":475,"_66":476,"_68":477,"_70":478,"_72":479,"_74":480,"_76":481,"_78":482,"_111":483,"_138":139,"_140":24,"_141":-5,"_142":486,"_144":487,"_166":159,"_160":489,"_162":490,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":491,"_177":492,"_183":493,"_185":494,"_197":496,"_199":-5,"_200":-5,"_201":202},"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},[484,485],{"_70":271,"_72":272,"_58":273,"_117":274,"_119":275,"_121":24,"_122":276},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":280,"_68":281,"_62":282,"_70":283,"_72":284,"_74":285,"_76":286,"_122":287,"_154":488,"_156":289,"_158":159,"_138":139,"_160":290,"_162":291,"_164":-5,"_165":-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",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：静态资源缓存本地\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":495,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"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":498,"_60":61,"_62":499,"_64":500,"_66":501,"_68":502,"_70":503,"_72":504,"_74":505,"_76":506,"_78":507,"_111":508,"_138":139,"_140":24,"_141":-5,"_142":511,"_144":512,"_166":159,"_160":514,"_162":514,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":515,"_177":516,"_183":517,"_185":518,"_197":520,"_199":-5,"_200":-5,"_201":202},"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},[509,510],{"_70":271,"_72":272,"_58":273,"_117":274,"_119":275,"_121":24,"_122":276},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":280,"_68":281,"_62":282,"_70":283,"_72":284,"_74":285,"_76":286,"_122":287,"_154":513,"_156":289,"_158":159,"_138":139,"_160":290,"_162":291,"_164":-5,"_165":-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",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：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":519,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"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":522,"_60":61,"_62":523,"_64":524,"_66":525,"_68":526,"_70":527,"_72":528,"_74":529,"_76":530,"_78":531,"_111":532,"_138":139,"_140":24,"_141":-5,"_142":541,"_144":542,"_166":159,"_160":554,"_162":554,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":555,"_177":556,"_183":557,"_185":558,"_197":560,"_199":-5,"_200":-5,"_201":202},"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},[533,540],{"_70":534,"_72":535,"_58":536,"_117":537,"_119":538,"_121":24,"_122":539},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","JavaScript","A4D8FB","JavaScript 语法部分",{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":543,"_68":544,"_62":545,"_70":546,"_72":547,"_74":202,"_76":548,"_122":549,"_154":550,"_156":551,"_158":159,"_138":139,"_160":552,"_162":553,"_164":-5,"_165":-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",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：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":559,"_188":151,"_189":151,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"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":562,"_60":61,"_62":563,"_64":564,"_66":565,"_68":566,"_70":567,"_72":568,"_74":569,"_76":570,"_78":571,"_111":572,"_138":139,"_140":24,"_141":-5,"_142":580,"_144":581,"_166":159,"_160":583,"_162":583,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":584,"_177":585,"_183":586,"_185":587,"_197":589,"_199":-5,"_200":-5,"_201":202},"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},[573,574],{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},{"_70":575,"_72":576,"_58":577,"_117":578,"_119":275,"_121":24,"_122":579},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":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":582,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：日期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":588,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"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":591,"_60":61,"_62":592,"_64":593,"_66":594,"_68":595,"_70":596,"_72":597,"_74":598,"_76":599,"_78":600,"_111":601,"_138":139,"_140":24,"_141":-5,"_142":604,"_144":605,"_166":159,"_160":607,"_162":607,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":608,"_177":609,"_183":610,"_185":611,"_197":613,"_199":-5,"_200":-5,"_201":202},"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},[602,603],{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},{"_70":575,"_72":576,"_58":577,"_117":578,"_119":275,"_121":24,"_122":579},[],{"_58":543,"_68":544,"_62":545,"_70":546,"_72":547,"_74":202,"_76":548,"_122":549,"_154":606,"_156":551,"_158":159,"_138":139,"_160":552,"_162":553,"_164":-5,"_165":-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",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"以下是使用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":612,"_188":202,"_189":202,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"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":615,"_60":61,"_62":616,"_64":617,"_66":618,"_68":619,"_70":620,"_72":621,"_74":622,"_76":623,"_78":624,"_111":625,"_138":139,"_140":24,"_141":-5,"_142":628,"_144":629,"_166":202,"_160":631,"_162":632,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":633,"_177":634,"_183":635,"_185":636,"_197":638,"_199":-5,"_200":-5,"_201":202},"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},[626,627],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":630,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：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":637,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"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":640,"_60":61,"_62":641,"_64":642,"_66":643,"_68":644,"_70":645,"_72":646,"_74":647,"_76":648,"_78":649,"_111":650,"_138":139,"_140":24,"_141":-5,"_142":653,"_144":654,"_166":159,"_160":656,"_162":656,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":657,"_177":658,"_183":659,"_185":660,"_197":662,"_199":-5,"_200":-5,"_201":202},"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},[651,652],{"_70":534,"_72":535,"_58":536,"_117":537,"_119":538,"_121":24,"_122":539},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":280,"_68":281,"_62":282,"_70":283,"_72":284,"_74":285,"_76":286,"_122":287,"_154":655,"_156":289,"_158":159,"_138":139,"_160":290,"_162":291,"_164":-5,"_165":-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",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：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":661,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"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":664,"_60":61,"_62":665,"_64":666,"_66":667,"_68":668,"_70":669,"_72":670,"_74":671,"_76":672,"_78":673,"_111":674,"_138":139,"_140":24,"_141":-5,"_142":677,"_144":678,"_166":159,"_160":680,"_162":680,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":681,"_177":682,"_183":683,"_185":684,"_197":686,"_199":-5,"_200":-5,"_201":202},"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},[675,676],{"_70":534,"_72":535,"_58":536,"_117":537,"_119":538,"_121":24,"_122":539},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":679,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：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":685,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"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":688,"_60":61,"_62":689,"_64":690,"_66":691,"_68":692,"_70":693,"_72":694,"_74":695,"_76":696,"_78":697,"_111":698,"_138":139,"_140":24,"_141":-5,"_142":701,"_144":702,"_166":159,"_160":704,"_162":705,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":706,"_177":707,"_183":708,"_185":709,"_197":711,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/554","https://api.github.com/repos/pro-collection/interview-question/issues/554/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/554/comments","https://api.github.com/repos/pro-collection/interview-question/issues/554/events","https://github.com/pro-collection/interview-question/issues/554",1899349862,"I_kwDOJGDC6c5xNcdm",554,"如何理解数据驱动视图，有哪些核心要素？【热度: 943】",{"_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},[699,700],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":703,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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:14:11Z","2023-09-16T08:14:12Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：理解数据驱动视图\n\n数据驱动视图是指将数据作为主要驱动力，通过对数据的处理和分析，动态地更新和呈现视图的过程。它强调将数据与视图进行解耦，使得视图的呈现可以根据数据的变化自动更新，实现更灵活、可扩展和可维护的视图。\n\n数据驱动视图的核心要素包括：\n\n1. 数据源：数据驱动视图需要有一个或多个数据源，这些数据源可以是来自数据库、API接口、文件等不同的来源。\n\n2. 数据处理：对数据进行处理和分析的过程。这包括对数据进行清洗、过滤、转换、计算等操作，以便于后续的视图呈现。\n\n3. 视图模板：视图模板定义了视图的结构和样式，并指定了如何将数据展示在视图中。视图模板通常使用一种模板语言，可以根据数据的变化自动生成最终的视图。\n\n4. 视图更新机制：视图更新机制是指如何根据数据的变化自动更新视图。这可以基于事件驱动的方式，当数据发生变化时主动更新视图；也可以采用响应式编程的方式，通过观察数据的变化来自动更新视图。\n\n5. 用户交互：数据驱动视图通常与用户进行交互，用户可以通过界面操作改变数据，从而触发视图的更新。用户交互可以通过表单、按钮、滑块等不同的方式实现。\n\n通过将数据与视图解耦，数据驱动视图可以实现更灵活、可扩展和可维护的视图呈现方式。同时，它也可以提高开发效率，减少开发人员对视图的手动管理。\n",{"_58":710,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/554/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/554/timeline",{"_58":713,"_60":61,"_62":714,"_64":715,"_66":716,"_68":717,"_70":718,"_72":719,"_74":720,"_76":721,"_78":722,"_111":723,"_138":139,"_140":24,"_141":-5,"_142":726,"_144":727,"_166":159,"_160":729,"_162":730,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":731,"_177":732,"_183":733,"_185":734,"_197":736,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/553","https://api.github.com/repos/pro-collection/interview-question/issues/553/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/553/comments","https://api.github.com/repos/pro-collection/interview-question/issues/553/events","https://github.com/pro-collection/interview-question/issues/553",1899349328,"I_kwDOJGDC6c5xNcVQ",553,"WeakMap 是什么样的数据结构【热度: 431】",{"_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},[724,725],{"_70":534,"_72":535,"_58":536,"_117":537,"_119":538,"_121":24,"_122":539},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":728,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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:12:16Z","2023-09-16T08:12:45Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：WeakMap应用、WeakMap数据、WeakMap api\n\n**基本概念**\n\nWeakMap 是一种键值对存储的数据结构，类似于 Map。它的特点是键必须是对象，值可以是任意类型的数据。\n\nWeakMap 内部使用了引用计数的方式来判断键是否存活，当键不再被引用时，垃圾回收机制会自动清除对应的键值对。这意味着如果没有其他地方引用该键，WeakMap 中的键值对会被自动清理，并释放内存。\n\n与 Map 不同的是，WeakMap 的键是弱引用，不会阻止垃圾回收。这意味着在 WeakMap 中，键不能被枚举、迭代或获取键的数量。同时，WeakMap 也没有提供像 Map 中的 size 属性和 clear 方法。\n\n因为键是弱引用，所以 WeakMap 也不能使用普通对象作为键，只能使用具有引用类型的对象作为键。这是为了避免内存泄漏问题，因为如果键是普通对象，即使它没有被其他地方引用，也无法被垃圾回收。\n\n因为 WeakMap 的键是弱引用并且没有提供常用的方法，所以它的使用场景相对有限，主要用于存储对象的私有数据或附加元数据。\n\n**有哪些 api**\n\nWeakMap 提供了以下的 API：\n\n- `set(key, value)`: 向 WeakMap 中设置键值对，键必须是对象。\n- `get(key)`: 获取指定键对应的值。\n- `has(key)`: 判断指定键是否存在于 WeakMap 中。\n- `delete(key)`: 删除指定键对应的键值对。\n- 注意：WeakMap 没有提供 `size` 属性和 `clear` 方法，也不能直接迭代或枚举键。\n\n需要注意的是，由于 WeakMap 的键是弱引用，只能使用对象作为键，同时也意味着无法通过值来查找对应的键。所以 WeakMap 适用于需要存储对象的私有数据或附加元数据的场景，而不适合用于需要根据值来查找键的情况。\n",{"_58":735,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/553/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/553/timeline",{"_58":738,"_60":61,"_62":739,"_64":740,"_66":741,"_68":742,"_70":743,"_72":744,"_74":745,"_76":746,"_78":747,"_111":748,"_138":139,"_140":24,"_141":-5,"_142":751,"_144":752,"_166":754,"_160":755,"_162":756,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":757,"_177":758,"_183":759,"_185":760,"_197":762,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/551","https://api.github.com/repos/pro-collection/interview-question/issues/551/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/551/comments","https://api.github.com/repos/pro-collection/interview-question/issues/551/events","https://github.com/pro-collection/interview-question/issues/551",1884318813,"I_kwDOJGDC6c5wUGxd",551,"[代码实现] JS 中数组深对比实现【热度: 985】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[749,750],{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},{"_70":575,"_72":576,"_58":577,"_117":578,"_119":275,"_121":24,"_122":579},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":753,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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},6,"2023-09-06T16:00:24Z","2024-08-01T12:15:28Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：JS数组对比\r\n\r\n在JavaScript中，可以使用递归的方式实现数组的深度对比。以下是一个示例函数，用于比较两个数组是否相等：\r\n\r\n```javascript\r\n// 判断对象是否相同\r\nfunction deepEqual(obj1, obj2) {\r\n // 检查类型是否相同\r\n if (typeof obj1 !== typeof obj2) {\r\n return false;\r\n }\r\n \r\n // 检查是否是对象或数组\r\n if (typeof obj1 === 'object' && obj1 !== null && obj2 !== null) {\r\n // 检查对象或数组长度是否相同\r\n if (Object.keys(obj1).length !== Object.keys(obj2).length) {\r\n return false;\r\n }\r\n \r\n for (let key in obj1) {\r\n // 递归比较每个属性的值\r\n if (!deepEqual(obj1[key], obj2[key])) {\r\n return false;\r\n }\r\n }\r\n \r\n return true;\r\n }\r\n \r\n // 比较基本类型的值\r\n return obj1 === obj2;\r\n}\r\n\r\nfunction deepArrayEqual(arr1, arr2) {\r\n // 检查数组长度是否相同\r\n if (arr1.length !== arr2.length) {\r\n return false;\r\n }\r\n \r\n for (let i = 0; i < arr1.length; i++) {\r\n const value1 = arr1[i];\r\n const value2 = arr2[i];\r\n \r\n // 递归比较每个元素的值\r\n if (Array.isArray(value1) && Array.isArray(value2)) {\r\n if (!deepArrayEqual(value1, value2)) {\r\n return false;\r\n }\r\n } else if (typeof value1 === 'object' && typeof value2 === 'object') {\r\n if (!deepEqual(value1, value2)) {\r\n return false;\r\n }\r\n } else {\r\n // 比较基本类型的值\r\n if (value1 !== value2) {\r\n return false;\r\n }\r\n }\r\n }\r\n \r\n return true;\r\n}\r\n```\r\n\r\n使用示例：\r\n\r\n```javascript\r\nconst arr1 = [1, [2, 3], { name: 'John' }];\r\nconst arr2 = [1, [2, 3], { name: 'John' }];\r\nconst arr3 = [1, [2, 3], { name: 'Jane' }];\r\n\r\nconsole.log(deepArrayEqual(arr1, arr2)); // true\r\nconsole.log(deepArrayEqual(arr1, arr3)); // false\r\n```\r\n\r\n在上述示例中，`deepArrayEqual`函数会递归比较两个数组的每个元素的值，包括嵌套的数组和对象。如果两个数组是相等的，则返回`true`，否则返回`false`。注意，该函数不会检查函数、正则表达式、日期等复杂类型的值。\r\n",{"_58":761,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/551/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/551/timeline",{"_58":764,"_60":61,"_62":765,"_64":766,"_66":767,"_68":768,"_70":769,"_72":770,"_74":771,"_76":772,"_78":773,"_111":774,"_138":139,"_140":24,"_141":-5,"_142":777,"_144":778,"_166":159,"_160":780,"_162":781,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":782,"_177":783,"_183":784,"_185":785,"_197":787,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/535","https://api.github.com/repos/pro-collection/interview-question/issues/535/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/535/comments","https://api.github.com/repos/pro-collection/interview-question/issues/535/events","https://github.com/pro-collection/interview-question/issues/535",1867233833,"I_kwDOJGDC6c5vS7op",535,"如何实现大文件断点续传【热度: 897】",{"_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},[775,776],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":779,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-08-25T15:15:00Z","2023-08-25T15:15:26Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：文件上传断点续传\n\n前端实现断点续传一般涉及到以下几个步骤：\n\n1. 分片上传：将大文件分割成多个小的文件块。可以使用 JavaScript 的 `File` 对象的 `slice` 方法来实现分片。\n\n2. 上传文件块：使用 XMLHttpRequest 或 Fetch API 发送每个文件块到服务器。可以将每个文件块的索引、总文件大小等信息一同发送到服务器。\n\n3. 保存上传进度：在每个文件块上传成功后，可以将已上传的块数、已上传的字节数等信息保存到本地，以便在继续上传时恢复进度。\n\n4. 续传：在继续上传时，先从本地恢复已上传的进度信息。然后根据已上传的字节数，计算出下一个文件块的起始位置，然后继续上传剩余的文件块。\n\n5. 合并文件块：在所有文件块都上传完成后，服务器可以将这些文件块合并为完整的文件。可以通过将所有文件块的内容拼接在一起或使用服务器端的工具进行合并。\n\n需要注意的是，断点续传的实现还需要服务器端的支持。服务器端需要接收和处理分片上传的请求，并保存和管理已上传的文件块，以便在续传时恢复文件的完整性。因此，前端实现断点续传需要和后端进行协作。\n",{"_58":786,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/535/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/535/timeline",{"_58":789,"_60":61,"_62":790,"_64":791,"_66":792,"_68":793,"_70":794,"_72":795,"_74":796,"_76":797,"_78":798,"_111":799,"_138":139,"_140":24,"_141":-5,"_142":802,"_144":803,"_166":159,"_160":805,"_162":806,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":807,"_177":808,"_183":809,"_185":810,"_197":812,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/534","https://api.github.com/repos/pro-collection/interview-question/issues/534/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/534/comments","https://api.github.com/repos/pro-collection/interview-question/issues/534/events","https://github.com/pro-collection/interview-question/issues/534",1867227476,"I_kwDOJGDC6c5vS6FU",534,"长连接了解多少【热度: 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},[800,801],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":804,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-08-25T15:10:41Z","2023-08-25T15:10:56Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：http 长连接过程\n\nHTTP/1.1 的长连接（Keep-Alive）是一种机制，使客户端和服务器在同一连接上可以发送和接收多个 HTTP 请求和响应。它的原理如下：\n\n1. 客户端发送请求：当客户端发起一个 HTTP 请求时，在请求头中会包含一个 `Connection` 字段，标识这个连接是否需要保持持久连接。如果客户端希望保持连接，它会将该字段设置为 `keep-alive`。\n\n2. 服务器响应：当服务器收到客户端的请求后，如果它支持长连接，它会在响应头中添加一个 `Connection` 字段，也设置为 `keep-alive`，表示服务器同意保持连接。\n\n3. 客户端发送下一个请求：在客户端收到服务器的响应后，如果它也同意保持连接，客户端可以继续发送下一个请求。这个请求会被发送到同一连接上，而不是创建一个新的连接。\n\n4. 保持连接或关闭连接：客户端和服务器可以在多个请求和响应之间重复步骤 3。当一方决定不再继续发送请求时，它可以在请求头或响应头中将 `Connection` 字段设置为 `close`，表示关闭连接。\n\n长连接的原理是通过减少连接的建立和关闭次数，来提高性能和效率。它可以减少网络延迟和连接建立的开销，从而加快请求和响应的传输速度。同时，长连接还可以减少服务器的负载，因为服务器不需要频繁地处理连接的建立和关闭。\n\n需要注意的是，尽管 HTTP/1.1 支持长连接，但它并不是默认启用的，需要在请求头中明确指定 `Connection: keep-alive` 才能使用长连接。此外，服务器也可以在响应头中明确指定长连接。如果客户端和服务器都支持长连接，并在请求和响应中都明确设置了长连接，那么连接就会被保持，直到其中一方关闭连接或指定关闭。\n",{"_58":811,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/534/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/534/timeline",{"_58":814,"_60":61,"_62":815,"_64":816,"_66":817,"_68":818,"_70":819,"_72":820,"_74":821,"_76":822,"_78":823,"_111":824,"_138":139,"_140":24,"_141":-5,"_142":833,"_144":834,"_166":836,"_160":837,"_162":838,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":839,"_177":840,"_183":841,"_185":842,"_197":844,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/495","https://api.github.com/repos/pro-collection/interview-question/issues/495/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/495/comments","https://api.github.com/repos/pro-collection/interview-question/issues/495/events","https://github.com/pro-collection/interview-question/issues/495",1822710283,"I_kwDOJGDC6c5spFoL",495,"原生 js 如何进行监听路由的变化【热度: 906】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[825,832],{"_70":826,"_72":827,"_58":828,"_117":829,"_119":830,"_121":24,"_122":831},5252299764,"LA_kwDOJGDC6c8AAAABOQ-79A","https://api.github.com/repos/pro-collection/interview-question/labels/%E6%B5%8F%E8%A7%88%E5%99%A8","浏览器","f9d0c4","浏览器相关知识点",{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":835,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-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},4,"2023-07-26T15:48:43Z","2023-09-05T07:30:20Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：原生路由监听\n\n在原生 JavaScript 中，可以使用 window 对象上的 popstate 事件来监听路由的变化。popstate 事件在浏览器的历史记录发生变化时触发，包括当用户点击浏览器的前进或后退按钮、调用 history.pushState() 或 history.replaceState() 方法等。\n\n下面是一个简单的示例代码，演示如何使用 popstate 事件监听路由的变化：\n\n```javascript\n// 监听 popstate 事件\nwindow.addEventListener('popstate', function(event) {\n // 在这里可以执行路由变化后的处理逻辑\n console.log('路由发生了变化');\n});\n\n// 修改 URL 并添加一条历史记录\nhistory.pushState(null, null, '/new-route');\n\n// 或者使用 history.replaceState() 方法替换当前历史记录\n// history.replaceState(null, null, '/new-route');\n```\n\n在上面的代码中，当 popstate 事件触发时，回调函数会被执行。你可以在回调函数中添加适当的处理逻辑，例如更新页面内容、重新渲染视图等。\n\n需要注意的是，popstate 事件不会在页面加载时触发，因此如果你需要在页面加载时执行一些初始化的路由处理逻辑，可以将该逻辑封装为一个函数，并在加载时调用一次，然后再通过 popstate 事件监听路由的变化。\n\n另外，还可以使用 history.state 属性来获取当前历史记录的状态对象，该对象可以在调用 history.pushState() 或 history.replaceState() 方法时传入。这样可以在 popstate 事件回调函数中访问和使用该状态对象。\n\n```javascript\nwindow.addEventListener('popstate', function(event) {\n var state = history.state;\n // 在这里可以访问和使用历史记录的状态对象\n});\n```\n\n通过监听 popstate 事件，可以在原生 JavaScript 中轻松地监听和响应路由的变化，从而实现相应的页面切换和处理逻辑。\n",{"_58":843,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/495/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/495/timeline",{"_58":846,"_60":61,"_62":847,"_64":848,"_66":849,"_68":850,"_70":851,"_72":852,"_74":853,"_76":854,"_78":855,"_111":856,"_138":139,"_140":24,"_141":-5,"_142":859,"_144":860,"_166":159,"_160":862,"_162":863,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":864,"_177":865,"_183":866,"_185":867,"_197":869,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/472","https://api.github.com/repos/pro-collection/interview-question/issues/472/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/472/comments","https://api.github.com/repos/pro-collection/interview-question/issues/472/events","https://github.com/pro-collection/interview-question/issues/472",1791635103,"I_kwDOJGDC6c5qyi6f",472,"用 nodejs 实现一个命令行工具，统计输入目录下面指定代码的行数【热度: 732】",{"_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},[857,858],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":861,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-07-06T14:03:51Z","2023-07-06T14:04:04Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：统计指定目录下代码行数\n\n要实现一个命令行工具来统计输入目录下指定代码的行数，你可以使用Node.js的`fs`模块来读取文件内容并进行行数统计。以下是一个简单的实现示例：\n\n```javascript\nconst fs = require('fs');\nconst path = require('path');\n\nfunction countLinesInDirectory(dirPath, fileExtension) {\n let totalLines = 0;\n\n function countLinesInFile(filePath) {\n const content = fs.readFileSync(filePath, 'utf-8');\n const lines = content.split('\\n');\n totalLines += lines.length;\n }\n\n function processDirectory(directoryPath) {\n const files = fs.readdirSync(directoryPath);\n\n files.forEach((file) => {\n const filePath = path.join(directoryPath, file);\n const stats = fs.statSync(filePath);\n\n if (stats.isFile() && path.extname(file) === fileExtension) {\n countLinesInFile(filePath);\n } else if (stats.isDirectory()) {\n processDirectory(filePath);\n }\n });\n }\n\n processDirectory(dirPath);\n\n return totalLines;\n}\n\n// 命令行参数，第一个参数是目录路径，第二个参数是文件扩展名\nconst [_, __, dirPath, fileExtension] = process.argv;\n\nconst linesCount = countLinesInDirectory(dirPath, fileExtension);\nconsole.log(`Total lines of ${fileExtension} files in ${dirPath}: ${linesCount}`);\n```\n\n你可以将上述代码保存为一个JavaScript文件，比如`line-counter.js`。然后，在终端中运行以下命令：\n\n```\nnode line-counter.js /path/to/directory .js\n```\n\n其中`/path/to/directory`是你要统计的目录路径，`.js`是你要统计的文件扩展名。运行命令后，程序将会输出指定文件类型在指定目录中的总行数。\n\n你可以根据需要自定义输出格式、文件过滤规则等。此示例只是一个基本的实现，你可以根据具体需求进行扩展和优化。\n",{"_58":868,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/472/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/472/timeline",{"_58":871,"_60":61,"_62":872,"_64":873,"_66":874,"_68":875,"_70":876,"_72":877,"_74":878,"_76":879,"_78":880,"_111":881,"_138":139,"_140":24,"_141":-5,"_142":884,"_144":885,"_166":159,"_160":887,"_162":888,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":889,"_177":890,"_183":891,"_185":892,"_197":894,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/468","https://api.github.com/repos/pro-collection/interview-question/issues/468/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/468/comments","https://api.github.com/repos/pro-collection/interview-question/issues/468/events","https://github.com/pro-collection/interview-question/issues/468",1775100941,"I_kwDOJGDC6c5pzeQN",468,"前端如何用 canvas 来做电影院选票功能",{"_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},[882,883],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":886,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-26T15:55:34Z","2023-06-26T15:55:35Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"电影院选票功能可以通过 Canvas 来实现，具体实现步骤如下：\n\n1. 绘制座位图案：使用 Canvas 绘制座位图案，可以用矩形或圆形来表示每个座位，还可以添加不同颜色来表示该座位的状态（已售、已选、可选等）。\n\n2. 添加鼠标事件：添加鼠标事件，如鼠标移动、鼠标单击等，来实现用户交互操作。例如，当用户点击座位时，将该座位的状态改为已选状态，并更新座位图案的颜色。\n\n3. 统计已选座位：在用户选票的过程中，需要统计已选座位的数量和位置，并将选票信息展示给用户。可以通过遍历座位图案数组来实现。\n\n4. 添加检查功能：为了防止用户在选票过程中出现错误，可以添加检查功能，如检查座位是否已被售出或已被其他人选中等。\n\n5. 添加确认和支付功能：当用户选好座位后，需要确认并支付，可以通过弹出确认对话框来实现，并将用户的选票信息发送至后台进行处理。\n\n\n\n**代码实现如下**\n\n```html\n\n\n\n \n Title\n\n\n

\n\n\n\n\n\n\n```\n\n\n",{"_58":893,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/468/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/468/timeline",{"_58":896,"_60":61,"_62":897,"_64":898,"_66":899,"_68":900,"_70":901,"_72":902,"_74":903,"_76":904,"_78":905,"_111":906,"_138":139,"_140":24,"_141":-5,"_142":909,"_144":910,"_166":159,"_160":912,"_162":913,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":914,"_177":915,"_183":916,"_185":917,"_197":919,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/462","https://api.github.com/repos/pro-collection/interview-question/issues/462/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/462/comments","https://api.github.com/repos/pro-collection/interview-question/issues/462/events","https://github.com/pro-collection/interview-question/issues/462",1757146577,"I_kwDOJGDC6c5ou-3R",462,"斐波拉契数列是什么，用 JS 实现，用尾调优化斐波拉契数列【热度: 923】",{"_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},[907,908],{"_70":534,"_72":535,"_58":536,"_117":537,"_119":538,"_121":24,"_122":539},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":911,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-14T15:18:25Z","2023-06-14T15:18:26Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：斐波拉契数列、尾调优化\n\n斐波那契数列是指：0、1、1、2、3、5、8、13、21、34、……，在数学上，斐波那契数列以如下被以递归的方法定义：\n\nF(0) = 0, F(1) = 1\nF(n) = F(n-1) + F(n-2) (n > 1)\n\n用 JS 实现斐波那契数列可以如下：\n\n```\nfunction fibonacci(n) {\n if (n <= 1) {\n return n;\n }\n return fibonacci(n - 1) + fibonacci(n - 2);\n}\n```\n\n这个函数用递归的方式实现了斐波那契数列的求解。但是递归会导致函数栈的不断扩张，当 n 很大的时候会导致栈溢出。所以为了避免这种情况，可以使用尾调用优化。\n\n尾调用优化是指：一个函数的最后一个操作是一个函数调用，并且这个调用的返回值就是这个函数的返回值。这种情况下，函数的调用栈可以被重用，从而避免了栈溢出的问题。\n\n用尾调用优化实现斐波那契数列可以如下：\n\n```\nfunction fibonacci(n, curr = 0, next = 1) {\n if (n === 0) {\n return curr;\n }\n return fibonacci(n - 1, next, curr + next);\n}\n```\n\n这个函数用了 ES6 的默认参数来实现了尾调用优化。由于函数的最后一个操作是对 fibonacci 函数的递归调用，并且这个调用的返回值就是函数的返回值，所以这个递归调用被尾调用优化了。\n",{"_58":918,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/462/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/462/timeline",{"_58":921,"_60":61,"_62":922,"_64":923,"_66":924,"_68":925,"_70":926,"_72":927,"_74":928,"_76":929,"_78":930,"_111":931,"_138":139,"_140":24,"_141":-5,"_142":934,"_144":935,"_166":159,"_160":937,"_162":937,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":938,"_177":939,"_183":940,"_185":941,"_197":943,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/445","https://api.github.com/repos/pro-collection/interview-question/issues/445/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/445/comments","https://api.github.com/repos/pro-collection/interview-question/issues/445/events","https://github.com/pro-collection/interview-question/issues/445",1753005470,"I_kwDOJGDC6c5ofL2e",445,"执行上下文栈是什么【热度: 632】",{"_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},[932,933],{"_70":534,"_72":535,"_58":536,"_117":537,"_119":538,"_121":24,"_122":539},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":936,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-12T15:24:14Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：执行上下文栈\n\n在JavaScript中，执行上下文栈（Execution Context Stack）是用于跟踪和管理函数执行的机制。每当JavaScript代码执行到一个函数时，就会创建一个执行上下文（Execution Context）并被推入执行上下文栈的顶部。当函数执行完毕后，执行上下文将从栈中弹出，控制权将返回给调用该函数的上下文。\n\n执行上下文栈遵循\"先进后出\"（Last-In-First-Out）的原则。也就是说，最后一个推入栈的执行上下文会被最先弹出。\n\n每个执行上下文都包含了以下三个重要的组成部分：\n\n1. 变量对象（Variable Object）：变量对象存储了函数的形参、函数声明、变量声明和作用域链等信息。\n\n2. 作用域链（Scope Chain）：作用域链是一个由当前执行上下文的变量对象和所有父级执行上下文的变量对象组成的链表结构。它用于变量查找的过程。\n\n3. this 值：this 值指定了当前执行上下文中的 this 关键字的指向。\n\n通过执行上下文栈，JavaScript引擎能够追踪到代码的执行位置，并根据当前执行上下文的环境来解析变量和执行函数。这种栈结构的管理方式使得JavaScript能够实现函数的嵌套调用和正确的变量作用域处理。\n",{"_58":942,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/445/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/445/timeline",{"_58":945,"_60":61,"_62":946,"_64":947,"_66":948,"_68":949,"_70":950,"_72":951,"_74":952,"_76":953,"_78":954,"_111":955,"_138":139,"_140":24,"_141":-5,"_142":958,"_144":959,"_166":202,"_160":961,"_162":962,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":963,"_177":964,"_183":965,"_185":966,"_197":968,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/431","https://api.github.com/repos/pro-collection/interview-question/issues/431/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/431/comments","https://api.github.com/repos/pro-collection/interview-question/issues/431/events","https://github.com/pro-collection/interview-question/issues/431",1748082889,"I_kwDOJGDC6c5oMaDJ",431,"判断数组的方式有哪些【热度: 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},[956,957],{"_70":534,"_72":535,"_58":536,"_117":537,"_119":538,"_121":24,"_122":539},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":543,"_68":544,"_62":545,"_70":546,"_72":547,"_74":202,"_76":548,"_122":549,"_154":960,"_156":551,"_158":159,"_138":139,"_160":552,"_162":553,"_164":-5,"_165":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-08T14:58:10Z","2024-06-26T10:02:38Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：js判断数组方法\n\n在 JavaScript 中，判断一个值是否为数组有多种方式，以下是几种常见的方法：\n\n1. `Array.isArray()`: 使用 `Array.isArray()` 方法可以判断一个值是否为数组。它是 ES5 中新增的方法，返回一个布尔值。\n```javascript\nconst arr = [1, 2, 3];\nconsole.log(Array.isArray(arr)); // true\n\nconst obj = { a: 1, b: 2 };\nconsole.log(Array.isArray(obj)); // false\n```\n\n2. `instanceof` 操作符：可以使用 `instanceof` 操作符检查一个对象是否是特定类的实例。对于数组，可以使用 `instanceof Array` 判断。\n```javascript\nconst arr = [1, 2, 3];\nconsole.log(arr instanceof Array); // true\n\nconst obj = { a: 1, b: 2 };\nconsole.log(obj instanceof Array); // false\n```\n\n3. `Array.prototype.isArray()`：可以通过 `Array.prototype.isArray.call()` 方法来判断一个值是否为数组。这种方式在某些特定情况下使用较多。\n```javascript\nconst arr = [1, 2, 3];\nconsole.log(Array.prototype.isArray.call(arr)); // true\n\nconst obj = { a: 1, b: 2 };\nconsole.log(Array.prototype.isArray.call(obj)); // false\n```\n\n4. `Object.prototype.toString()`：可以使用 `Object.prototype.toString.call()` 方法来获取一个值的类型信息，进而判断是否为数组。返回的结果是一个包含类型信息的字符串，例如 \"[object Array]\"。\n```javascript\nconst arr = [1, 2, 3];\nconsole.log(Object.prototype.toString.call(arr) === \"[object Array]\"); // true\n\nconst obj = { a: 1, b: 2 };\nconsole.log(Object.prototype.toString.call(obj) === \"[object Array]\"); // false\n```\n\n这些方法各有特点，根据实际需求选择合适的方法进行判断。通常推荐使用 `Array.isArray()` 方法来判断一个值是否为数组，因为它是专门用于判断数组的标准方法，并且在大多数现代浏览器中得到广泛支持。\n",{"_58":967,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/431/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/431/timeline",{"_58":970,"_60":61,"_62":971,"_64":972,"_66":973,"_68":974,"_70":975,"_72":976,"_74":977,"_76":978,"_78":979,"_111":980,"_138":139,"_140":24,"_141":-5,"_142":983,"_144":984,"_166":159,"_160":986,"_162":987,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":988,"_177":989,"_183":990,"_185":991,"_197":993,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/408","https://api.github.com/repos/pro-collection/interview-question/issues/408/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/408/comments","https://api.github.com/repos/pro-collection/interview-question/issues/408/events","https://github.com/pro-collection/interview-question/issues/408",1740393524,"I_kwDOJGDC6c5nvEw0",408,"token过期后，页面如何实现无感刷新【热度: 485】",{"_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},[981,982],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":146,"_68":147,"_62":148,"_70":149,"_72":150,"_74":151,"_76":152,"_122":153,"_154":985,"_156":157,"_158":159,"_138":139,"_160":161,"_162":163,"_164":-5,"_165":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-04T14:05:08Z","2023-06-04T14:05:09Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：token过期刷新、token刷新\n\n当 token 过期后，实现无感刷新页面的一种常见方式是使用刷新 token 的机制。下面是一个基本的实现思路：\n\n1. 在前端应用中，使用某种方式（例如 Cookie、Local Storage）存储 token。\n2. 在每次发起请求时，通过拦截器或者请求中间件检查 token 是否过期。\n3. 如果 token 过期，前端会收到一个特定的响应（例如 HTTP 状态码 401 Unauthorized）。\n4. 前端通过监听该特定的响应，触发刷新 token 的操作。\n5. 刷新 token 的操作可以是发送一个特定的请求到后端，后端验证并颁发新的 token。\n6. 在 token 刷新成功后，前端更新存储的 token，并重新发起之前的请求，确保请求的无感刷新。\n\n需要注意的是，具体的实现可能会因框架和后端 API 的不同而有所差异。上述步骤提供了一个基本的思路，你可以根据实际需求和使用的技术栈进行调整和扩展。\n\n",{"_58":992,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/408/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/408/timeline",{"_58":995,"_60":61,"_62":996,"_64":997,"_66":998,"_68":999,"_70":1000,"_72":1001,"_74":1002,"_76":1003,"_78":1004,"_111":1005,"_138":139,"_140":24,"_141":-5,"_142":1008,"_144":1009,"_166":159,"_160":1011,"_162":1012,"_165":-5,"_169":170,"_106":-5,"_171":-5,"_172":1013,"_177":1014,"_183":1015,"_185":1016,"_197":1018,"_199":-5,"_200":-5,"_201":202},"https://api.github.com/repos/pro-collection/interview-question/issues/394","https://api.github.com/repos/pro-collection/interview-question/issues/394/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/394/comments","https://api.github.com/repos/pro-collection/interview-question/issues/394/events","https://github.com/pro-collection/interview-question/issues/394",1734491919,"I_kwDOJGDC6c5nYj8P",394,"[webpack] 提高 webpack 的构建速度的办法有哪些【热度: 1,208】",{"_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},[1006,1007],{"_70":271,"_72":272,"_58":273,"_117":274,"_119":275,"_121":24,"_122":276},{"_70":132,"_72":133,"_58":134,"_117":135,"_119":136,"_121":24,"_122":137},[],{"_58":280,"_68":281,"_62":282,"_70":283,"_72":284,"_74":285,"_76":286,"_122":287,"_154":1010,"_156":289,"_158":159,"_138":139,"_160":290,"_162":291,"_164":-5,"_165":-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-05-31T15:30:28Z","2023-11-01T15:01:44Z",{"_174":159,"_175":159,"_176":159},{"_179":159,"_180":159,"_181":159,"_182":159},"**关键词**：webpack 构建、webpack 构建优化、webpack 构建速度\n\n以下是一些可以提高Webpack构建速度的办法：\n\n1. 使用更快的构建工具：升级Webpack到最新版本，因为每个新版本通常都会带来性能改进和优化。\n \n2. 减少文件的数量：通过代码拆分和按需加载等技术，将代码拆分成更小的模块，减少每次构建需要处理的文件数量。\n \n3. 使用缓存：启用Webpack的缓存功能，可以在多次构建过程中复用已经构建好的模块，从而减少重新构建的时间。\n \n4. 使用多线程/多进程构建：通过使用工具如HappyPack或thread-loader等，可以将Webpack的构建过程并行化，利用多线程或多进程来加速构建速度。\n \n5. 优化Loader配置：确保Loader的配置尽可能精确，只对需要处理的文件进行操作，并且使用高效的Loader插件。避免不必要的文件处理和转换，以提高构建速度。\n\n6. 使用DLL和缓存组：使用Webpack的DLLPlugin和CacheGroups等功能，可以将一些稳定不变的依赖提前编译和缓存，减少每次构建的时间。\n\n7. 压缩输出文件：使用Webpack的压缩插件（如UglifyJsPlugin）对输出文件进行压缩和混淆，减小文件大小，加快加载速度。\n\n8. 配置resolve.extensions：通过配置Webpack的resolve.extensions，明确指定需要处理的文件类型，避免Webpack进行多余的文件扫描和匹配。\n\n9. 开启持久化缓存：使用Webpack的持久化缓存插件（如HardSourceWebpackPlugin），将构建过程中的中间结果缓存到硬盘中，提高后续构建的速度。\n\n10. 使用Tree Shaking：利用Webpack的Tree Shaking特性，移除未使用的代码，减小输出文件的体积，加快加载速度。\n\n这些是提高Webpack构建速度的一些常见方法，可以根据具体项目的需求和情况选择适合的优化策略。同时，不同的项目和环境可能会有不同的性能瓶颈，因此需要根据实际情况进行具体的优化和调整。\n\n",{"_58":1017,"_188":159,"_189":159,"_190":159,"_191":159,"_192":159,"_193":159,"_194":159,"_195":159,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/394/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/394/timeline","pagination",{"_1021":202,"_174":151},"value","actionData","errors"]