[{"_1":2,"_497":-5,"_498":-5},"loaderData",{"_3":4,"_53":54},"root",{"_5":6},"clerkState",{"_7":8},"__internal_clerk_state",{"_9":10,"_25":26,"_27":28,"_29":28,"_30":24,"_31":28,"_32":28,"_33":28,"_34":28,"_35":28,"_36":28,"_37":28,"_38":28,"_39":40,"_49":28,"_50":28,"_51":24,"_52":24},"__clerk_ssr_state",{"_11":12,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":-5,"_20":-5,"_21":-5,"_22":-5,"_23":24},"tokenType","session_token","sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"__publishableKey","pk_live_Y2xlcmsucXVlc3Rpb25zLnZpc3VhbGl6ZWl0LmFwcCQ","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_41":24,"_23":24,"_42":28,"_43":44,"_45":28,"_46":26,"_47":24,"_48":28},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__clerkJSUrl","__clerkJSVersion","__telemetryDisabled","__telemetryDebug","routes/_index",{"_55":56,"_494":495},"questions",[57,195,220,269,300,335,360,384,409,433,458],{"_58":59,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":79,"_111":112,"_131":132,"_133":24,"_134":-5,"_135":136,"_137":138,"_159":152,"_153":160,"_155":160,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":165,"_169":170,"_175":176,"_177":178,"_189":190,"_191":-5,"_192":-5,"_193":194},"url","https://api.github.com/repos/pro-collection/interview-question/issues/748","repository_url","https://api.github.com/repos/pro-collection/interview-question","labels_url","https://api.github.com/repos/pro-collection/interview-question/issues/748/labels{/name}","comments_url","https://api.github.com/repos/pro-collection/interview-question/issues/748/comments","events_url","https://api.github.com/repos/pro-collection/interview-question/issues/748/events","html_url","https://github.com/pro-collection/interview-question/issues/748","id",2289897124,"node_id","I_kwDOJGDC6c6IfQ6k","number",748,"title","[React] useEffect 钩子的工作原理是什么【热度: 459】","user",{"_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},"login","yanlele",22188674,"MDQ6VXNlcjIyMTg4Njc0","avatar_url","https://avatars.githubusercontent.com/u/22188674?v=4","gravatar_id","https://api.github.com/users/yanlele","https://github.com/yanlele","followers_url","https://api.github.com/users/yanlele/followers","following_url","https://api.github.com/users/yanlele/following{/other_user}","gists_url","https://api.github.com/users/yanlele/gists{/gist_id}","starred_url","https://api.github.com/users/yanlele/starred{/owner}{/repo}","subscriptions_url","https://api.github.com/users/yanlele/subscriptions","organizations_url","https://api.github.com/users/yanlele/orgs","repos_url","https://api.github.com/users/yanlele/repos","https://api.github.com/users/yanlele/events{/privacy}","received_events_url","https://api.github.com/users/yanlele/received_events","type","User","user_view_type","public","site_admin","labels",[113,124],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},5252532904,"LA_kwDOJGDC6c8AAAABORNKqA","https://api.github.com/repos/pro-collection/interview-question/labels/web%E6%A1%86%E6%9E%B6","name","web框架","color","CB446E","default","description","web 框架相关知识",{"_70":125,"_72":126,"_58":127,"_117":128,"_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","滴滴","ededed","公司标签","state","open","locked","assignee","assignees",[],"milestone",{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":148,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/2","https://github.com/pro-collection/interview-question/milestone/2","https://api.github.com/repos/pro-collection/interview-question/milestones/2/labels",9124545,"MI_kwDOJGDC6c4AizrB",2,"中","中级程序面试问题","creator",{"_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},"open_issues",510,"closed_issues",0,"created_at","2023-03-06T15:00:15Z","updated_at","2025-09-07T06:08:31Z","due_on","closed_at","comments","2024-05-10T14:57:08Z","author_association","MEMBER","active_lock_reason","sub_issues_summary",{"_166":152,"_167":152,"_168":152},"total","completed","percent_completed","issue_dependencies_summary",{"_171":152,"_172":152,"_173":152,"_174":152},"blocked_by","total_blocked_by","blocking","total_blocking","body","**关键词**：React useEffect\n\n`useEffect` 钩子的工作原理涉及到 React 的渲染流程和副作用的调度机制。以下是其工作原理的详细说明：\n\n- **调度副作用**：当你在组件内部调用 `useEffect` 时，你实际上是将一个副作用函数及其依赖项数组排队等待执行。这个函数并不会立即执行。\n\n- **提交阶段（Commit Phase）**：React 渲染组件并且执行了所有的纯函数组件或类组件的渲染方法后，会进入所谓的提交阶段。在这个阶段，React 将计算出的新视图（新的 DOM 节点）更新到屏幕上。一旦这个更新完成，React 就知道现在可以安全地执行副作用函数了，因为这不会影响到正在屏幕上显示的界面。\n\n- **副作用执行**：提交阶段完成后，React 会处理所有排队的副作用。如果组件是首次渲染，所有的副作用都会执行。如果组件是重新渲染，React 会首先对比副作用的依赖项数组：如果依赖项未变，副作用则不会执行；如果依赖项有变化，或者没有提供依赖项数组，副作用会再次执行。\n\n- **清理机制**：如果副作用函数返回了一个函数，那么这个函数将被视为清理函数。在执行当前的副作用之前，以及组件卸载前，React 会先调用上一次渲染中的清理函数。这样确保了不会有内存泄漏，同时能撤销上一次副作用导致的改变。\n\n- **延迟副作用**：尽管 `useEffect` 会在渲染之后执行，但它是异步执行的，不会阻塞浏览器更新屏幕。这意味着 React 会等待浏览器完成绘制之后，再执行你的副作用函数，以此来确保副作用处理不会导致用户可见的延迟。\n\n通过这种机制，`useEffect` 允许开发者以一种优化的方式来处理组件中可能存在的副作用，而不需要关心渲染的具体时机。退出清理功能确保了即使组件被多次快速创建和销毁，应用程序也能保持稳定和性能。\n","reactions",{"_58":179,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/748/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/748/timeline","performed_via_github_app","state_reason","score",1,{"_58":196,"_60":61,"_62":197,"_64":198,"_66":199,"_68":200,"_70":201,"_72":202,"_74":203,"_76":204,"_78":205,"_111":206,"_131":132,"_133":24,"_134":-5,"_135":209,"_137":210,"_159":152,"_153":212,"_155":213,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":214,"_169":215,"_175":216,"_177":217,"_189":219,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/747","https://api.github.com/repos/pro-collection/interview-question/issues/747/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/747/comments","https://api.github.com/repos/pro-collection/interview-question/issues/747/events","https://github.com/pro-collection/interview-question/issues/747",2289889999,"I_kwDOJGDC6c6IfPLP",747,"[React] 介绍一下 useReducer【热度: 547】",{"_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},[207,208],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":211,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-05-10T14:52:56Z","2024-05-10T14:52:57Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：React useReducer\n\n`useReducer`是 React Hooks 的一个部分，它为状态管理提供了一个更加灵活的方法。`useReducer`特别适合处理包含多个子值的复杂状态逻辑，或者当下一个状态依赖于之前的状态时。与`useState`相比，`useReducer`更适合于复杂的状态逻辑，它使组件的状态管理更加清晰和可预测。\n\n### 基础使用：\n\n```jsx\nconst [state, dispatch] = useReducer(reducer, initialState);\n```\n\n- `state`：当前管理的状态。\n- `dispatch`：一个允许你分发动作(action)来更新状态的函数。\n- `reducer`：一个函数，接受当前的状态和一个动作对象作为参数，并返回一个新的状态。\n- `initialState`：初始状态值。\n\n### Reducer 函数：\n\nReducer 函数的格式如下：\n\n```javascript\nfunction reducer(state, action) {\n switch (action.type) {\n case \"ACTION_TYPE\": {\n // 处理动作并返回新的状态\n return newState;\n }\n // 更多的动作处理\n default:\n return state;\n }\n}\n```\n\n### 动作（Action）：\n\n动作通常是一个包含`type`字段的对象。`type`用于在 reducer 函数中标识要执行的动作。动作对象也可以包含其他数据字段，用于传递动作所需的额外信息。\n\n### 示例：\n\n以下是一个使用`useReducer`的简单示例：\n\n```jsx\nimport React, { useReducer } from \"react\";\n\n// 定义reducer函数\nfunction counterReducer(state, action) {\n switch (action.type) {\n case \"increment\":\n return { count: state.count + 1 };\n case \"decrement\":\n return { count: state.count - 1 };\n default:\n return state;\n }\n}\n\nfunction Counter() {\n // 初始化状态和dispatch函数\n const [state, dispatch] = useReducer(counterReducer, { count: 0 });\n\n return (\n <>\n Count: {state.count}\n \n \n \n );\n}\n```\n\n在上面的例子中，我们创建了一个简单的计数器。当用户点击按钮时，会分发一个包含`type`的动作到`useReducer`钩子。然后，`reducer`函数根据动作`type`来决定如何更新状态。\n\n### 使用场景：\n\n- 管理局部组件的状态。\n- 处理复杂的状态逻辑。\n- 当前状态依赖上一状态时，可以通过上一状态计算得到新状态。\n\n`useReducer`通常与`Context`一起使用可以实现不同组件间的状态共享，这在避免 prop drilling（长距离传递 prop）的同时使状态更新更为模块化。\n",{"_58":218,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/747/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/747/timeline",{"_58":221,"_60":61,"_62":222,"_64":223,"_66":224,"_68":225,"_70":226,"_72":227,"_74":228,"_76":229,"_78":230,"_111":231,"_131":132,"_133":24,"_134":-5,"_135":247,"_137":248,"_159":152,"_153":261,"_155":262,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":263,"_169":264,"_175":265,"_177":266,"_189":268,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/696","https://api.github.com/repos/pro-collection/interview-question/issues/696/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/696/comments","https://api.github.com/repos/pro-collection/interview-question/issues/696/events","https://github.com/pro-collection/interview-question/issues/696",2241587526,"I_kwDOJGDC6c6Fm-lG",696,"浏览器对队头阻塞有什么优化？【热度: 368】",{"_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},[232,239,246],{"_70":233,"_72":234,"_58":235,"_117":236,"_119":237,"_121":24,"_122":238},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","网络","1A8829","web 网络相关",{"_70":240,"_72":241,"_58":242,"_117":243,"_119":244,"_121":24,"_122":245},5252299764,"LA_kwDOJGDC6c8AAAABOQ-79A","https://api.github.com/repos/pro-collection/interview-question/labels/%E6%B5%8F%E8%A7%88%E5%99%A8","浏览器","f9d0c4","浏览器相关知识点",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":249,"_68":250,"_62":251,"_70":252,"_72":253,"_74":254,"_76":255,"_122":256,"_147":257,"_149":258,"_151":152,"_131":132,"_153":259,"_155":260,"_157":-5,"_158":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/3","https://github.com/pro-collection/interview-question/milestone/3","https://api.github.com/repos/pro-collection/interview-question/milestones/3/labels",9124547,"MI_kwDOJGDC6c4AizrD",3,"高","高级别面试问题",{"_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},454,"2023-03-06T15:00:27Z","2025-09-07T06:21:17Z","2024-04-13T14:32:12Z","2024-04-13T14:32:13Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：队头阻塞优化\n\n队头阻塞（Head-of-Line Blocking，缩写 HoLB）问题主要发生在网络通信中，特别是在使用 HTTP/1.1 和以前版本时，在一个 TCP 连接中同一时间只能处理一个请求。即使后续的请求已经准备好在客户端，它们也必须等待当前处理中的请求完成后才能被发送。这会延迟整个页面或应用的网络请求，降低性能。\n\n现代浏览器和协议已经实施了多种优化措施来减少或解决队头阻塞问题：\n\n1. **HTTP/2**：\n 为了解决 HTTP/1.x 的诸多问题，包括队头阻塞问题，HTTP/2 引入了多路复用（multiplexing）功能。这允许在同一 TCP 连接上同时传输多个独立的请求-响应消息。与 HTTP/1.1 相比，HTTP/2 在同一个连接上可以并行处理多个请求，大大减少了队头阻塞的问题。\n\n2. **服务器推送**：\n HTTP/2 还引入了服务器推送（server push）功能，允许服务器主动发送多个响应到客户端，而不需要客户端明确地为每个资源提出请求。这提高了页面加载的速度，因为相关资源可以被预先发送而无需等待浏览器请求。\n\n3. **域名分散（Domain Sharding）**：\n 这种技术常用于 HTTP/1.1 中，通过创建多个子域，使得浏览器可以同时开启更多的 TCP 连接来加载资源。虽然这种方法可以在一定程度上减轻队头阻塞，但它增加了复杂性，并且在 HTTP/2 中由于多路复用功能变得不再必要。\n\n4. **连接重用（Connection Reuse）**：\n 这是 HTTP/1.1 中的一个特性，即持久连接（Persistent Connections），允许在一次 TCP 连接中发送和接收多个 HTTP 请求和响应，而无需开启新的连接，从而减少了 TCP 握手的开销并提升了效率。\n\n5. **资源优化**：\n 减少资源的大小通过压缩（如 GZIP），优化图片，减少 CSS 和 JavaScript 文件的大小等，可以减少队头阻塞的影响，因为小资源文件传输更快。\n\n6. **优先级设置**：\n HTTP/2 允许设置资源的加载优先级，使得关键资源（如 HTML，CSS，JavaScript）可以比不那么重要的资源（如图片，广告）更早加载。\n\n7. **预加载**：\n 浏览器可以通过使用``标签预加载关键资源，例如字体文件和关键脚本，这样可以确保它们在主要内容加载之前已经准备好。\n\n8. **HTTP/3 和 QUIC 协议**：\n HTTP/3 是未来的推进方向，它基于 QUIC 协议，一个在 UDP 之上的新传输层协议，旨在进一步减少延迟，解决 TCP/IP 协议的队头阻塞问题。\n\n总的来说，HTTP/2 的特性如多路复用、服务器推送和优先级设置都有助于减少队头阻塞。而 HTTP/3 的引入可能会在未来为网络通信带来根本性的变化。在使用 HTTP/2、HTTP/3 和浏览器级别的优化时，网页开发者也需注意资源加载优化的最佳实践，以更全面地应对队头阻塞问题。\n",{"_58":267,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/696/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/696/timeline",{"_58":270,"_60":61,"_62":271,"_64":272,"_66":273,"_68":274,"_70":275,"_72":276,"_74":277,"_76":278,"_78":279,"_111":280,"_131":132,"_133":24,"_134":-5,"_135":289,"_137":290,"_159":144,"_153":292,"_155":293,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":294,"_169":295,"_175":296,"_177":297,"_189":299,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/695","https://api.github.com/repos/pro-collection/interview-question/issues/695/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/695/comments","https://api.github.com/repos/pro-collection/interview-question/issues/695/events","https://github.com/pro-collection/interview-question/issues/695",2241581518,"I_kwDOJGDC6c6Fm9HO",695,"Proxy 和 Reflect 有什么关系？【热度: 361】",{"_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},[281,288],{"_70":282,"_72":283,"_58":284,"_117":285,"_119":286,"_121":24,"_122":287},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","JavaScript","A4D8FB","JavaScript 语法部分",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":291,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-04-13T14:17:03Z","2025-02-28T16:24:46Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"`Proxy` 和 `Reflect` 是 ES6 (ECMAScript 2015) 中引入的两个不同的构造函数，它们密切相关，通常在某些操作中一起使用。\n\n1. **Proxy**：\n `Proxy` 对象用于定义基本操作的自定义行为，例如属性查找、赋值、枚举、函数调用等。当你对一个`Proxy`对象执行这些操作时，你可以拦截并重新定义这些操作的行为。\n\n 下面是一些你可以使用`Proxy`拦截的操作:\n\n - `get`：读取属性值\n - `set`：设置属性值\n - `has`：`in`操作符\n - `deleteProperty`：`delete`操作符\n - `apply`：调用一个函数\n - 诸如此类的其他捕获器（handlers）\n\n2. **Reflect**：\n `Reflect`对象与`Proxy`捕获器（handlers）的方法一一对应。其目的是提供默认行为，对相应的对象操作进行默认的行为操作。在很多情况下，`Reflect`的方法与对应的直接对象操作是相同的。\n\n 这里是一些`Reflect`提供的方法的例子：\n\n - `Reflect.get()`：获取对象属性的值，类似于`obj[prop]`\n - `Reflect.set()`：设置对象属性的值，类似于`obj[prop] = value`\n - `Reflect.has()`：类似于`prop in obj`\n - `Reflect.deleteProperty()`：类似于`delete obj[prop]`\n - `Reflect.apply()`：调用一个函数\n - 其他与`Proxy`捕获器相对应的方法\n\n**两者的关系**：\n`Proxy`和`Reflect`的关系体现在它们共同协作时。在`Proxy`的捕获器函数中，开发者可以调用对应的`Reflect`方法，以实现默认的行为，同时加入自己的操纵和侧面逻辑。`Reflect`方法提供了一种方便的方式来保持默认行为，而不需要手动编写这些语义。\n\n例如，当在`Proxy`捕获器中捕获属性的读取行为时，使用`Reflect.get()`可以非常容易地调用相应对象的默认读取行为：\n\n```javascript\nlet obj = {\n a: 1,\n b: 2,\n c: 3,\n};\n\nlet p = new Proxy(obj, {\n get(target, prop, receiver) {\n console.log(`读取了属性 ${prop}`);\n return Reflect.get(target, prop, receiver); // 调用默认操作\n },\n set(target, prop, value, receiver) {\n console.log(`将属性 ${prop} 设置为 ${value}`);\n return Reflect.set(target, prop, value, receiver); // 调用默认操作\n },\n});\n\nconsole.log(p.a); // 读取了属性 a，返回 1\np.b = 4; // 将属性 b 设置为 4\n```\n\n上面的例子中，通过`Reflect`对象的方法，我们不仅可以保持默认的`get`和`set`行为，还可以在这个过程之前或之后添加自己的逻辑。这样的设计使得代理行为的实现既安全又易于管理。\n\n总而言之，`Proxy`和`Reflect`共同提供了一种强大的机制来拦截和定义基本的 JavaScript 操作，`Reflect`能提供操纵对象的默认方法，而`Proxy`则允许我们根据需要来定义这些操作的新行为。\n\n> 以前对两者进行过对比，但是没有讨论起关联关系。\n> 以前对比的文章：https://github.com/pro-collection/interview-question/issues/8\n",{"_58":298,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/695/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/695/timeline",{"_58":301,"_60":61,"_62":302,"_64":303,"_66":304,"_68":305,"_70":306,"_72":307,"_74":308,"_76":309,"_78":310,"_111":311,"_131":132,"_133":24,"_134":-5,"_135":314,"_137":315,"_159":152,"_153":327,"_155":328,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":329,"_169":330,"_175":331,"_177":332,"_189":334,"_191":-5,"_192":-5,"_193":194},"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},[312,313],{"_70":282,"_72":283,"_58":284,"_117":285,"_119":286,"_121":24,"_122":287},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":316,"_68":317,"_62":318,"_70":319,"_72":320,"_74":194,"_76":321,"_122":322,"_147":323,"_149":324,"_151":152,"_131":132,"_153":325,"_155":326,"_157":-5,"_158":-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-16T08:36:55Z","2023-09-16T08:36:56Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：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":333,"_180":194,"_181":194,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"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":336,"_60":61,"_62":337,"_64":338,"_66":339,"_68":340,"_70":341,"_72":342,"_74":343,"_76":344,"_78":345,"_111":346,"_131":132,"_133":24,"_134":-5,"_135":349,"_137":350,"_159":144,"_153":352,"_155":353,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":354,"_169":355,"_175":356,"_177":357,"_189":359,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/540","https://api.github.com/repos/pro-collection/interview-question/issues/540/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/540/comments","https://api.github.com/repos/pro-collection/interview-question/issues/540/events","https://github.com/pro-collection/interview-question/issues/540",1875790781,"I_kwDOJGDC6c5vzku9",540,"类型的转换有哪些【热度: 631】",{"_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},[347,348],{"_70":282,"_72":283,"_58":284,"_117":285,"_119":286,"_121":24,"_122":287},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":316,"_68":317,"_62":318,"_70":319,"_72":320,"_74":194,"_76":321,"_122":322,"_147":351,"_149":324,"_151":152,"_131":132,"_153":325,"_155":326,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-08-31T15:42:14Z","2025-02-11T08:39:29Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：js类型转换\r\n\r\n可以将上述类型转换分为以下几类：\r\n\r\n1. 显式转换：显式转换是通过特定的函数或操作符来实现的，开发者明确地指定了类型转换的规则和目标类型。例如使用`String()`、`Number()`、`Boolean()`等函数进行类型转。\r\n\r\n2. 隐式转换：隐式转换是在特定的运算或操作中自动发生的，不需要开发者明确指定类型转换的规则和目标类型。例如在字符串拼接时，JavaScript会自动将其他类型转换为字符串类型；在使用比较操作符（如`==`、`>`、`<`）进行比较时，JavaScript会自动进行类型转换以满足比较的要求。或者使用`+`、`-`、`*`、`/`等操作符进行数值转换和计算。\r\n\r\n3. 强制转换：强制转换是指将一个类型强制转换为另一个类型，无论是显式转换还是隐式转换，都是通过强制转换来实现的。例如使用`parseInt()`、`parseFloat()`等函数将字符串转换为数字类型；使用`Boolean()`函数将其他类型转换为布尔类型。\r\n\r\n隐式转换在某些情况下可能会导致不可预测的结果，因此在开发中应尽量避免依赖隐式转换，而是通过显式转换来确保类型转换的准确性。\r\n\r\n\r\n--------\r\n**补充**\r\n\r\n在JavaScript中，有以下几种常见的类型转换方式：\r\n\r\n1. 转换为字符串：可以使用String()函数或toString()方法将其他类型的值转换为字符串类型。例如：\r\n ```javascript\r\n var num = 42;\r\n var str = String(num); // 将数字转换为字符串\r\n var bool = true;\r\n var str2 = bool.toString(); // 将布尔值转换为字符串\r\n ```\r\n\r\n2. 转换为数字：可以使用Number()函数或使用parseInt()、parseFloat()等方法将其他类型的值转换为数字类型。例如：\r\n ```javascript\r\n var str = \"42\";\r\n var num = Number(str); // 将字符串转换为数字\r\n var str2 = \"3.14\";\r\n var floatNum = parseFloat(str2); // 将字符串转换为浮点数\r\n ```\r\n\r\n3. 转换为布尔值：可以使用Boolean()函数将其他类型的值转换为布尔类型。例如：\r\n ```javascript\r\n var num = 42;\r\n var bool = Boolean(num); // 将数字转换为布尔值\r\n var str = \"hello\";\r\n var bool2 = Boolean(str); // 将字符串转换为布尔值\r\n ```\r\n\r\n4. 隐式类型转换：JavaScript在某些情况下会自动进行类型转换，例如通过算术运算符、比较运算符等进行操作时，会根据需要隐式地将值转换为特定的类型。例如：\r\n ```javascript\r\n var num1 = 42;\r\n var num2 = \"3\";\r\n var sum = num1 + Number(num2); // 隐式将字符串转换为数字并进行相加\r\n ```\r\n\r\n",{"_58":358,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/540/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/540/timeline",{"_58":361,"_60":61,"_62":362,"_64":363,"_66":364,"_68":365,"_70":366,"_72":367,"_74":368,"_76":369,"_78":370,"_111":371,"_131":132,"_133":24,"_134":-5,"_135":374,"_137":375,"_159":152,"_153":377,"_155":377,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":378,"_169":379,"_175":380,"_177":381,"_189":383,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/539","https://api.github.com/repos/pro-collection/interview-question/issues/539/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/539/comments","https://api.github.com/repos/pro-collection/interview-question/issues/539/events","https://github.com/pro-collection/interview-question/issues/539",1875771341,"I_kwDOJGDC6c5vzf_N",539,"箭头函数解决了什么问题【热度: 568】",{"_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},[372,373],{"_70":282,"_72":283,"_58":284,"_117":285,"_119":286,"_121":24,"_122":287},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":376,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-08-31T15:31:16Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：箭头函数、箭头函数特点\n\n箭头函数是ES6中引入的一种新的函数语法，它主要解决了以下几个问题：\n\n1. **简化函数表达式**：箭头函数提供了一种更简洁的函数定义方式，可以用更短的语法来定义函数，减少了冗余的代码。例如，使用箭头函数可以将一个函数表达式 `function(x) { return x * x; }` 简化为 `(x) => x * x;`。\n\n2. **简化this的指向**：在传统的函数定义中，函数内部的`this`指向的是调用该函数的对象。而在箭头函数中，`this`的指向是在定义函数时确定的，指向的是箭头函数所在的上下文。这解决了传统函数中`this`指向容易混淆的问题，使得代码更加易读和简洁。\n\n3. **消除了`arguments`对象**：在箭头函数中，不存在`arguments`对象，这是因为箭头函数没有自己的`arguments`，它继承了所在上下文的`arguments`。这样可以避免在传统函数中使用`arguments`对象时出现的一些问题，如无法使用`arguments`对象的一些方法，以及与命名参数的冲突等。\n\n4. **适用于回调函数**：箭头函数的简洁性和对`this`指向的处理使其特别适用于作为回调函数使用。在传统的函数定义中，由于`this`指向的问题，经常需要使用额外的变量来绑定`this`，而箭头函数可以直接使用外层作用域的`this`，减少了代码的复杂性。\n\n箭头函数也有一些限制和注意事项，例如箭头函数没有自己的`arguments`、`super`和`new.target`，不能作为构造函数使用。\n",{"_58":382,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/539/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/539/timeline",{"_58":385,"_60":61,"_62":386,"_64":387,"_66":388,"_68":389,"_70":390,"_72":391,"_74":392,"_76":393,"_78":394,"_111":395,"_131":132,"_133":24,"_134":-5,"_135":398,"_137":399,"_159":152,"_153":401,"_155":402,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":403,"_169":404,"_175":405,"_177":406,"_189":408,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/494","https://api.github.com/repos/pro-collection/interview-question/issues/494/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/494/comments","https://api.github.com/repos/pro-collection/interview-question/issues/494/events","https://github.com/pro-collection/interview-question/issues/494",1822704446,"I_kwDOJGDC6c5spEM-",494," HTML5 的 History API 进行导航时，页面真的进行了一个切换吗？【热度: 424】",{"_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},[396,397],{"_70":240,"_72":241,"_58":242,"_117":243,"_119":244,"_121":24,"_122":245},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":400,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-07-26T15:45:13Z","2023-07-26T15:45:14Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：History 导航、History 导航页面切换、History 页面切换\n\n当使用 HTML5 的 History API 进行导航时，页面实际上没有进行完全的刷新。相反，只是通过 JavaScript 动态地更改 URL，并通过这个新的 URL 加载相应的内容。\n\n这种方式被称为前端路由，因为页面的切换是在前端处理的，而不是通过向服务器请求新的页面。在导航期间，浏览器会保留当前页面的状态和数据，以便在返回时恢复。\n\n这种页面切换的方式有以下几个特点：\n1. 前端渲染：页面的内容是通过 JavaScript 动态渲染的，可以实现无刷新的页面切换效果。\n2. 只加载部分内容：仅加载页面中需要更新的部分，而不是整个页面的内容。\n3. 保留页面状态：页面切换后，不会丢失当前页面的状态和数据，可以在返回时恢复。\n\n虽然页面实际上没有进行完全的切换和刷新，但对于用户而言，他们会感知到页面的切换效果，因为 URL 和页面内容发生了变化。这种方式能够提供更流畅的用户体验，并提高了应用的性能。\n\n需要注意的是，使用 History API 进行导航时，需要确保服务器配置正确，以便在直接访问 URL 或刷新页面时能够正确地返回相应的内容。这通常需要在服务器端设置一个后备规则，以便将所有请求都指向应用的入口文件，例如 index.html，从而实现前端路由的正常工作。\n",{"_58":407,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/494/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/494/timeline",{"_58":410,"_60":61,"_62":411,"_64":412,"_66":413,"_68":414,"_70":415,"_72":416,"_74":417,"_76":418,"_78":419,"_111":420,"_131":132,"_133":24,"_134":-5,"_135":423,"_137":424,"_159":152,"_153":426,"_155":426,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":427,"_169":428,"_175":429,"_177":430,"_189":432,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/484","https://api.github.com/repos/pro-collection/interview-question/issues/484/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/484/comments","https://api.github.com/repos/pro-collection/interview-question/issues/484/events","https://github.com/pro-collection/interview-question/issues/484",1820659149,"I_kwDOJGDC6c5shQ3N",484,"proxy 有那些实际使用场景【热度: 849】",{"_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},[421,422],{"_70":282,"_72":283,"_58":284,"_117":285,"_119":286,"_121":24,"_122":287},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":425,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-07-25T16:03:10Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：proxy 应用场景、proxy 作用是什么\n\nJavaScript的Proxy对象提供了一种拦截并定制JavaScript对象底层操作的机制。它允许你在对象上定义自定义行为，例如访问、赋值、函数调用等操作。Proxy对象包裹着目标对象，并拦截对目标对象的访问，使你能够自定义处理这些操作。\n\nProxy可以用于实现很多功能，包括：\n\n1. 属性验证和拦截：可以拦截对象属性的读取、写入和删除操作，并进行验证和处理。例如，你可以拦截对属性的访问，验证属性的值是否符合特定规则。\n\n2. 对象扩展和变形：可以拦截对象属性的读取和写入操作，并根据需求进行变形或扩展。例如，你可以在访问对象属性时，动态生成属性的值。\n\n3. 函数调用的拦截：可以拦截函数的调用和构造，以便进行自定义处理。例如，你可以在函数调用之前或之后执行额外的逻辑。\n\n4. 数组操作的拦截：可以拦截数组的操作，如push、pop、shift等，允许你对数组的操作进行自定义处理。例如，你可以在数组操作之后触发其他逻辑。\n\n通过使用Proxy对象，你可以拦截和修改对象的底层操作，实现更加灵活和定制化的行为。然而需要注意的是，Proxy对象的使用可能会导致性能上的一些影响，所以在使用时要谨慎考虑。\n\n\n**`Proxy`的实际使用场景有很多，以下是一些常见的示例**：\n\n1. 数据验证和过滤：你可以使用`Proxy`来拦截对对象属性的访问和修改，从而进行数据验证和过滤。例如，你可以使用`Proxy`来确保一个对象的属性只能是特定的类型或范围。\n\n```javascript\nconst person = {\n name: 'Alice',\n age: 25\n};\n\nconst personProxy = new Proxy(person, {\n set(target, key, value) {\n if (key === 'age' && (typeof value !== 'number' || value < 0)) {\n throw new Error('Invalid age');\n }\n\n target[key] = value;\n return true;\n }\n});\n\npersonProxy.age = -10; // 抛出错误：Invalid age\n```\n\n2. 计算属性：你可以使用`Proxy`来动态计算属性的值，而无需实际存储它们。这对于需要根据其他属性的值来计算衍生属性的情况非常有用。\n\n```javascript\nconst person = {\n firstName: 'Alice',\n lastName: 'Smith'\n};\n\nconst personProxy = new Proxy(person, {\n get(target, key) {\n if (key === 'fullName') {\n return `${target.firstName} ${target.lastName}`;\n }\n\n return target[key];\n }\n});\n\nconsole.log(personProxy.fullName); // Alice Smith\n```\n\n3. 资源管理和延迟加载：你可以使用`Proxy`来延迟加载资源，直到它们被真正需要。这在处理大型数据集或昂贵的资源时非常有用，可以节省内存和提高性能。\n\n```javascript\nconst expensiveResource = {\n // 一些昂贵的操作\n};\n\nconst expensiveResourceProxy = new Proxy(expensiveResource, {\n get(target, key) {\n // 在需要的时候才加载资源\n if (!target.loaded) {\n target.load();\n target.loaded = true;\n }\n\n return target[key];\n }\n});\n\nconsole.log(expensiveResourceProxy.someProperty); // 加载资源并返回属性值\n```\n\n4. 日志记录和调试：你可以使用`Proxy`来记录对象属性的访问和修改，以便进行调试和日志记录。\n\n```javascript\nconst person = {\n name: 'Alice',\n age: 25\n};\n\nconst personProxy = new Proxy(person, {\n get(target, key) {\n console.log(`Getting property '${key}'`);\n return target[key];\n },\n set(target, key, value) {\n console.log(`Setting property '${key}' to '${value}'`);\n target[key] = value;\n return true;\n }\n});\n\npersonProxy.age; // 记录：Getting property 'age'\npersonProxy.age = 30; // 记录：Setting property 'age' to '30'\n```\n\n这些只是`Proxy`的一些实际使用场景示例，`Proxy`的强大之处在于它提供了对对象的底层操作的拦截和自定义能力，可以根据具体需求进行灵活的应用。\n",{"_58":431,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/484/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/484/timeline",{"_58":434,"_60":61,"_62":435,"_64":436,"_66":437,"_68":438,"_70":439,"_72":440,"_74":441,"_76":442,"_78":443,"_111":444,"_131":132,"_133":24,"_134":-5,"_135":447,"_137":448,"_159":152,"_153":450,"_155":451,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":452,"_169":453,"_175":454,"_177":455,"_189":457,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/479","https://api.github.com/repos/pro-collection/interview-question/issues/479/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/479/comments","https://api.github.com/repos/pro-collection/interview-question/issues/479/events","https://github.com/pro-collection/interview-question/issues/479",1810096089,"I_kwDOJGDC6c5r49_Z",479,"模拟new操作【热度: 1,186】",{"_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},[445,446],{"_70":282,"_72":283,"_58":284,"_117":285,"_119":286,"_121":24,"_122":287},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":449,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-07-18T14:50:21Z","2023-07-18T14:50:22Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：模拟 new\n\n可以使用以下代码来模拟`new`操作：\n\n```javascript\nfunction myNew(constructor, ...args) {\n // 创建一个新对象，该对象继承自构造函数的原型\n const obj = Object.create(constructor.prototype);\n \n // 调用构造函数，并将新对象作为this值传递进去\n const result = constructor.apply(obj, args);\n \n // 如果构造函数返回一个对象，则返回该对象，否则返回新创建的对象\n return typeof result === 'object' && result !== null ? result : obj;\n}\n```\n\n使用示例：\n```javascript\nfunction Person(name, age) {\n this.name = name;\n this.age = age;\n}\n\nPerson.prototype.sayHello = function() {\n console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);\n}\n\nconst john = myNew(Person, \"John\", 25);\njohn.sayHello(); // 输出：Hello, my name is John and I'm 25 years old.\n```\n\n在上述代码中，`myNew`函数模拟了`new`操作的过程：\n1. 首先，通过`Object.create`创建了一个新对象`obj`，并将构造函数的原型对象赋值给该新对象的原型。\n2. 然后，使用`apply`方法调用构造函数，并传入新对象`obj`作为`this`值，以及其他参数。\n3. 最后，根据构造函数的返回值判断，如果返回的是一个非空对象，则返回该对象；否则，返回新创建的对象`obj`。\n\n这样，我们就可以使用`myNew`函数来模拟`new`操作了。\n",{"_58":456,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/479/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/479/timeline",{"_58":459,"_60":61,"_62":460,"_64":461,"_66":462,"_68":463,"_70":464,"_72":465,"_74":466,"_76":467,"_78":468,"_111":469,"_131":132,"_133":24,"_134":-5,"_135":483,"_137":484,"_159":194,"_153":486,"_155":487,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":488,"_169":489,"_175":490,"_177":491,"_189":493,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/393","https://api.github.com/repos/pro-collection/interview-question/issues/393/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/393/comments","https://api.github.com/repos/pro-collection/interview-question/issues/393/events","https://github.com/pro-collection/interview-question/issues/393",1732575475,"I_kwDOJGDC6c5nRQDz",393,"实现一个JS 函数，解析 url 参数，返回一个对象",{"_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},[470,475,476],{"_70":471,"_72":472,"_58":473,"_117":474,"_119":129,"_121":24,"_122":130},5562711972,"LA_kwDOJGDC6c8AAAABS5A_pA","https://api.github.com/repos/pro-collection/interview-question/labels/Shopee","Shopee",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":477,"_72":478,"_58":479,"_117":480,"_119":481,"_121":24,"_122":482},5931045040,"LA_kwDOJGDC6c8AAAABYYSQsA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0/%E7%AE%97%E6%B3%95","代码实现/算法","1d76db","代码实现或者算法实现",[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":485,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-05-30T16:13:53Z","2023-09-13T06:18:18Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"### 基础版本\n\n下面是一个简单的 JavaScript 函数，用于解析 URL 参数并返回一个包含参数键值对的对象：\n\n```javascript\nfunction parseUrlParams(url) {\n const params = {};\n const queryString = url.split('?')[1];\n\n if (queryString) {\n const pairs = queryString.split('&');\n pairs.forEach(pair => {\n const [key, value] = pair.split('=');\n params[key] = decodeURIComponent(value);\n });\n }\n\n return params;\n}\n```\n\n这个函数接受一个 URL 字符串作为参数，并返回解析后的参数对象。例如：\n\n```javascript\nconst url = 'https://example.com?name=John&age=30&city=New%20York';\nconst params = parseUrlParams(url);\n\nconsole.log(params);\n// Output: { name: \"John\", age: \"30\", city: \"New York\" }\n```\n\n这个函数的实现思路是先从 URL 字符串中提取查询字符串部分，然后将查询字符串按照 `&` 分割成键值对数组。接着遍历键值对数组，将每个键值对按照 `=` 分割，然后将键和值存储到结果对象 `params` 中，注意要对值进行 URL 解码以处理特殊字符。最后返回解析后的参数对象。\n\n\n### 进阶 - 支持json字符串参数\n\n如果要支持复杂的 JSON 字符串作为查询参数，可以使用 `JSON.parse()` 方法解析 JSON 字符串，并在解析后的对象中处理参数。\n\n下面是一个修改后的函数，支持解析复杂的 JSON 字符串作为查询参数：\n\n```javascript\nfunction parseUrlParams(url) {\n const params = {};\n const queryString = url.split('?')[1];\n\n if (queryString) {\n const pairs = queryString.split('&');\n pairs.forEach(pair => {\n const [key, value] = pair.split('=');\n const decodedValue = decodeURIComponent(value);\n\n try {\n params[key] = JSON.parse(decodedValue);\n } catch (error) {\n // 如果解析 JSON 失败，则将原始字符串存储到参数对象中\n params[key] = decodedValue;\n }\n });\n }\n\n return params;\n}\n```\n\n现在，如果查询参数是一个 JSON 字符串，它将被解析为相应的 JavaScript 对象，并作为参数对象的值。如果解析失败（例如，不是有效的 JSON 字符串），则将保留原始字符串作为值存储在参数对象中。\n\n以下是一个示例：\n\n```javascript\nconst url = 'https://example.com?name=John&age=30&address={\"city\":\"New York\",\"zipcode\":10001}';\nconst params = parseUrlParams(url);\n\nconsole.log(params);\n// Output: { name: \"John\", age: \"30\", address: { city: \"New York\", zipcode: 10001 } }\n```\n\n### 再次进阶-支持更复杂的场景，比如嵌套对象，数组\n\n下面是修改后的函数，支持解析复杂的查询参数，包括嵌套对象和数组：\n\n```javascript\nfunction parseUrlParams(url) {\n const params = {};\n const queryString = url.split('?')[1];\n\n if (queryString) {\n const pairs = queryString.split('&');\n pairs.forEach(pair => {\n const [key, value] = pair.split('=');\n const decodedValue = decodeURIComponent(value);\n\n const keys = key.split('.');\n let current = params;\n\n for (let i = 0; i < keys.length; i++) {\n const nestedKey = keys[i];\n const isArray = /\\[\\]$/.test(nestedKey);\n\n if (isArray) {\n const arrayKey = nestedKey.slice(0, -2);\n\n if (!current[arrayKey]) {\n current[arrayKey] = [];\n }\n\n if (i === keys.length - 1) {\n current[arrayKey].push(parseValue(decodedValue));\n } else {\n const newIndex = current[arrayKey].length;\n if (!current[arrayKey][newIndex]) {\n current[arrayKey][newIndex] = {};\n }\n current = current[arrayKey][newIndex];\n }\n } else {\n if (i === keys.length - 1) {\n current[nestedKey] = parseValue(decodedValue);\n } else {\n if (!current[nestedKey]) {\n current[nestedKey] = {};\n }\n current = current[nestedKey];\n }\n }\n }\n });\n }\n\n return params;\n}\n\nfunction parseValue(value) {\n try {\n return JSON.parse(value);\n } catch (error) {\n // 解析失败，则返回原始值\n return value;\n }\n}\n```\n\n现在，该函数可以正确解析包含嵌套对象和数组的查询参数。\n\n以下是一个示例：\n\n```javascript\nconst url = 'https://example.com?name=John&age=30&address.city=New%20York&address.zipcode=10001&tags[]=tag1&tags[]=tag2';\nconst params = parseUrlParams(url);\n\nconsole.log(params);\n// Output: { name: \"John\", age: \"30\", address: { city: \"New York\", zipcode: 10001 }, tags: [\"tag1\", \"tag2\"] }\n```\n\n在这个修改后的函数中，当遇到嵌套对象时，它会递归创建相应的对象属性。当遇到数组时，它会创建一个数组，并将值添加到数组中。\n\n",{"_58":492,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/393/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/393/timeline","pagination",{"_496":152,"_166":194},"value","actionData","errors"]