[{"_1":2,"_1011":-5,"_1012":-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,"_1006":1007},"questions",[57,188,211,234,264,292,323,347,380,415,438,468,492,516,539,563,586,609,638,662,686,715,739,768,797,826,850,874,910,934,958,983],{"_58":59,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":79,"_111":112,"_124":125,"_126":24,"_127":-5,"_128":129,"_130":131,"_152":145,"_146":153,"_148":153,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":158,"_162":163,"_168":169,"_170":171,"_182":183,"_184":-5,"_185":-5,"_186":187},"url","https://api.github.com/repos/pro-collection/interview-question/issues/1018","repository_url","https://api.github.com/repos/pro-collection/interview-question","labels_url","https://api.github.com/repos/pro-collection/interview-question/issues/1018/labels{/name}","comments_url","https://api.github.com/repos/pro-collection/interview-question/issues/1018/comments","events_url","https://api.github.com/repos/pro-collection/interview-question/issues/1018/events","html_url","https://github.com/pro-collection/interview-question/issues/1018","id",2615596550,"node_id","I_kwDOJGDC6c6b5tYG","number",1018,"title","eslint 该如何配置【热度: 487】","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],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},5284642729,"LA_kwDOJGDC6c8AAAABOv0_qQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B7%A5%E7%A8%8B%E5%8C%96","name","工程化","color","1d76db","default","description","web 项目工程化","state","open","locked","assignee","assignees",[],"milestone",{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":141,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-10-26T06:35:24Z","author_association","MEMBER","active_lock_reason","sub_issues_summary",{"_159":145,"_160":145,"_161":145},"total","completed","percent_completed","issue_dependencies_summary",{"_164":145,"_165":145,"_166":145,"_167":145},"blocked_by","total_blocked_by","blocking","total_blocking","body","**关键词**：eslint 配置\n\n在前端项目中，配置 ESLint 可以帮助你保持代码风格的一致性和提高代码质量。以下是配置 ESLint 的一般步骤：\n\n**一、安装 ESLint**\n\n1. 首先，确保你已经安装了 Node.js 和 npm（或 yarn）。\n2. 在项目目录中，使用以下命令安装 ESLint：\n\n - 使用 npm：`npm install eslint --save-dev`\n - 使用 yarn：`yarn add eslint --dev`\n\n**二、初始化 ESLint 配置**\n\n1. 在项目根目录下，运行以下命令来初始化 ESLint 配置：\n\n - `npx eslint --init`\n\n 这个命令会引导你通过一系列问题来生成一个基本的 ESLint 配置文件。你可以根据项目的需求选择不同的选项，例如：\n\n - 选择编程语言（JavaScript、TypeScript 等）。\n - 选择代码运行的环境（浏览器、Node.js 等）。\n - 选择风格指南（例如，Airbnb、Standard 等）。\n\n2. 回答完问题后，ESLint 会在项目根目录下生成一个`.eslintrc.*`文件（可能是`.eslintrc.js`、`.eslintrc.json`或`.eslintrc.yaml`等，具体取决于你的选择）。\n\n**三、配置文件选项详解**\n\n1. **解析器（Parser）**：\n\n - 根据你使用的编程语言，可能需要指定一个解析器。例如，对于 TypeScript 项目，你可以使用`@typescript-eslint/parser`。\n - 在`.eslintrc.*`文件中，可以这样配置：\n\n ```javascript\n module.exports = {\n parser: \"@typescript-eslint/parser\",\n };\n ```\n\n2. **插件（Plugins）**：\n\n - ESLint 插件可以提供额外的规则和功能。例如，`@typescript-eslint/eslint-plugin`是用于 TypeScript 的插件。\n - 配置插件如下：\n\n ```javascript\n module.exports = {\n plugins: [\"@typescript-eslint\"],\n };\n ```\n\n3. **规则（Rules）**：\n\n - 规则用于定义代码的风格和质量要求。每个规则都有一个可配置的选项，可以设置为`off`（关闭规则）、`warn`（警告）或`error`（错误）。\n - 例如，以下配置禁止使用未声明的变量，并要求使用分号：\n\n ```javascript\n module.exports = {\n rules: {\n \"no-undef\": \"error\",\n semi: [\"error\", \"always\"],\n },\n };\n ```\n\n4. **环境（Environments）**：\n\n - 指定代码运行的环境，以便 ESLint 可以正确地识别全局变量和内置模块。\n - 例如，如果你的代码在浏览器中运行，可以配置`browser`环境：\n\n ```javascript\n module.exports = {\n env: {\n browser: true,\n },\n };\n ```\n\n**四、在项目中使用 ESLint**\n\n1. **命令行使用**：\n\n - 可以在命令行中使用`eslint`命令来检查项目中的文件。例如：\n - `npx eslint.`将检查当前目录下的所有文件。\n\n2. **集成到编辑器**：\n\n - 许多代码编辑器都有 ESLint 插件，可以在编辑代码时实时显示错误和警告。\n - 配置编辑器的 ESLint 插件，使其使用项目中的`.eslintrc.*`文件进行代码检查。\n\n3. **集成到构建工具**：\n - 可以将 ESLint 集成到构建工具（如 Webpack、Gulp 等）中，以便在构建过程中自动检查代码。\n - 例如，对于 Webpack，可以使用`eslint-webpack-plugin`插件来集成 ESLint。\n","reactions",{"_58":172,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/1018/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/1018/timeline","performed_via_github_app","state_reason","score",1,{"_58":189,"_60":61,"_62":190,"_64":191,"_66":192,"_68":193,"_70":194,"_72":195,"_74":196,"_76":197,"_78":198,"_111":199,"_124":125,"_126":24,"_127":-5,"_128":201,"_130":202,"_152":145,"_146":204,"_148":204,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":205,"_162":206,"_168":207,"_170":208,"_182":210,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/1017","https://api.github.com/repos/pro-collection/interview-question/issues/1017/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1017/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1017/events","https://github.com/pro-collection/interview-question/issues/1017",2615594770,"I_kwDOJGDC6c6b5s8S",1017,"前端工程里面，如何检测并避免循环依赖【热度: 359】",{"_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},[200],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":203,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-10-26T06:30:36Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"**关键词**：循环依赖检测\n\n在前端工程中，可以通过以下方法检测并避免循环依赖：\n\n**一、检测循环依赖**\n\n1. 手动审查代码：\n\n - 仔细检查项目中的模块导入关系。查看每个模块的导入语句，确定是否存在一个模块被另一个模块导入，而后者又反过来导入前者的情况。\n - 对于大型项目，可以使用工具辅助手动审查，如代码编辑器的搜索功能或一些专门的代码分析工具，来快速查找可能的循环依赖。\n\n2. 使用静态分析工具：\n - 有一些静态分析工具可以帮助检测循环依赖。例如，ESLint 的插件`eslint-plugin-import`可以配置规则来检测模块之间的循环依赖。\n - 使用这些工具可以在开发过程中自动检测循环依赖，并给出明确的错误提示，帮助开发者及时发现和修复问题。\n\n**二、避免循环依赖**\n\n1. 优化模块设计：\n\n - 重新审视项目的模块结构，确保模块之间的依赖关系清晰且单向。避免设计出相互依赖的模块结构。\n - 例如，如果模块 A 和模块 B 相互依赖，可以考虑将它们共同依赖的部分提取出来，创建一个新的模块 C，然后让 A 和 B 分别依赖于 C，而不是直接相互依赖。\n\n2. 采用依赖注入：\n\n - 依赖注入是一种设计模式，可以帮助减少模块之间的直接依赖。通过将依赖项作为参数传递给函数或构造函数，可以在运行时动态地注入依赖项，而不是在模块内部直接导入它们。\n - 这样可以降低模块之间的耦合度，减少循环依赖的可能性。\n\n3. 延迟加载：\n\n - 在某些情况下，可以使用延迟加载（lazy loading）来避免循环依赖。延迟加载是指在实际需要的时候才加载模块，而不是在应用程序启动时就加载所有模块。\n - 例如，可以使用动态导入（dynamic import）来实现延迟加载。这样可以避免在模块加载时立即出现循环依赖的问题，因为模块只有在需要的时候才会被加载。\n\n4. 建立清晰的模块边界：\n - 每个模块应该有明确的职责和功能范围。避免模块之间的职责重叠，这样可以减少模块之间的相互依赖。\n - 同时，尽量保持模块的独立性，使得模块可以独立开发、测试和维护。\n",{"_58":209,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/1017/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1017/timeline",{"_58":212,"_60":61,"_62":213,"_64":214,"_66":215,"_68":216,"_70":217,"_72":218,"_74":219,"_76":220,"_78":221,"_111":222,"_124":125,"_126":24,"_127":-5,"_128":224,"_130":225,"_152":145,"_146":227,"_148":227,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":228,"_162":229,"_168":230,"_170":231,"_182":233,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/1016","https://api.github.com/repos/pro-collection/interview-question/issues/1016/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1016/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1016/events","https://github.com/pro-collection/interview-question/issues/1016",2597817423,"I_kwDOJGDC6c6a14xP",1016,"npm workspaces 是什么概念，主要是解决什么问题【热度: 100】",{"_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},[223],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":226,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-10-18T15:22:18Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"**关键词**：npm workspaces 概念\n\n`npm workspaces`是一个在 npm 中用于管理多包项目的功能。它主要解决以下几个问题：\n\n**一、项目结构管理**\n\n1. **多包项目组织**：\n\n - 在大型项目中，可能包含多个独立的软件包或模块。`npm workspaces`允许将这些包组织在一个统一的项目结构中，方便管理和开发。\n - 例如，一个企业级应用可能由一个前端库、一个后端服务和一个共享的工具包组成。使用`npm workspaces`，可以将这些包放在同一个项目目录下，而不是作为独立的项目进行管理。\n\n2. **依赖共享**：\n - 多个包之间可能存在共享的依赖项。`npm workspaces`可以自动管理这些共享依赖，避免重复安装和版本冲突。\n - 当一个包安装了某个依赖项时，其他包可以直接使用这个依赖，而不需要再次安装。这可以减少项目的体积和安装时间，提高开发效率。\n\n**二、开发效率提升**\n\n1. **单一命令行界面**：\n\n - 使用`npm workspaces`，可以在项目的根目录下使用单一的`npm`命令来管理所有的包。这避免了在每个包的目录下分别运行`npm`命令的繁琐过程。\n - 例如，可以在根目录下运行`npm install`来安装所有包的依赖项，或者运行`npm run test`来执行所有包的测试。\n\n2. **同时开发多个包**：\n - 开发人员可以在同一个项目中同时开发多个包，而不需要在不同的项目目录之间切换。这可以提高开发效率，特别是在需要频繁修改多个包的情况下。\n - 例如，可以在一个编辑器中打开多个包的代码，进行同时编辑和调试。\n\n**三、版本管理和发布**\n\n1. **统一版本控制**：\n\n - 在多包项目中，需要确保各个包的版本保持一致。`npm workspaces`可以帮助管理包的版本，确保在发布时所有的包都使用相同的版本号。\n - 可以在项目的根目录下使用`npm version`命令来统一更新所有包的版本号，并生成相应的版本标签。\n\n2. **简化发布流程**：\n - 发布多个包时，通常需要分别在每个包的目录下执行发布命令。使用`npm workspaces`，可以在项目的根目录下使用单一的发布命令来发布所有的包。\n - 例如，可以使用`npm publish --workspaces`来发布项目中的所有包，而不需要分别进入每个包的目录进行发布。\n",{"_58":232,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/1016/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1016/timeline",{"_58":235,"_60":61,"_62":236,"_64":237,"_66":238,"_68":239,"_70":240,"_72":241,"_74":242,"_76":243,"_78":244,"_111":245,"_124":125,"_126":24,"_127":-5,"_128":253,"_130":254,"_152":145,"_146":256,"_148":257,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":258,"_162":259,"_168":260,"_170":261,"_182":263,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/1015","https://api.github.com/repos/pro-collection/interview-question/issues/1015/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1015/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1015/events","https://github.com/pro-collection/interview-question/issues/1015",2597809472,"I_kwDOJGDC6c6a121A",1015,"package.json 依赖申明的方式有哪些，他们有何却别【热度: 193】",{"_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},[246],{"_70":247,"_72":248,"_58":249,"_117":250,"_119":251,"_121":24,"_122":252},5312047129,"LA_kwDOJGDC6c8AAAABPJ9oGQ","https://api.github.com/repos/pro-collection/interview-question/labels/web%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF","web应用场景","EA4E1E","应用场景类问题",[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":255,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-10-18T15:18:06Z","2024-10-18T15:18:07Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"**关键词**：前端依赖申明方式\n\n**一、`dependencies`（生产依赖）**\n\n1. **定义和用途**：\n\n - `dependencies`用于声明项目在生产环境中运行所必需的依赖项。\n - 这些依赖项是项目正常运行所不可或缺的，无论是在开发阶段还是在部署到生产环境后。\n\n2. **示例**：\n\n - 比如，如果你的项目使用了 Express.js 框架来构建服务器，那么 Express.js 就应该被声明在`dependencies`中。\n - `\"express\": \"^4.17.1\"`表示安装 Express 版本 4.17.1 或更高的兼容版本。\n\n3. **安装和使用**：\n - 当你运行`npm install`或`yarn install`时，这些依赖项会被自动安装到项目的`node_modules`目录中。\n - 在生产环境中部署项目时，这些依赖项也会被一同部署。\n\n**二、`devDependencies`（开发依赖）**\n\n1. **定义和用途**：\n\n - `devDependencies`用于声明仅在开发过程中需要的依赖项。\n - 这些依赖项通常包括开发工具、测试框架、代码格式化工具等，它们不是项目在生产环境中运行所必需的。\n\n2. **示例**：\n\n - 例如，Jest 是一个流行的 JavaScript 测试框架，如果你的项目使用 Jest 进行测试，那么 Jest 应该被声明在`devDependencies`中。\n - `\"jest\": \"^26.6.3\"`表示安装 Jest 版本 26.6.3 或更高的兼容版本。\n\n3. **安装和使用**：\n - 同样，当你运行`npm install`或`yarn install`时，这些依赖项会被安装到项目的`node_modules`目录中。\n - 但是，在生产环境中部署项目时，通常不会部署这些开发依赖项，以减小项目的体积和复杂性。\n\n**区别总结**：\n\n1. **使用场景不同**：\n - `dependencies`中的依赖项是项目在生产环境中运行所必需的，而`devDependencies`中的依赖项仅在开发过程中使用。\n2. **部署方式不同**：\n - 生产环境部署时，通常只部署`dependencies`中的依赖项，而不部署`devDependencies`中的依赖项。\n3. **影响项目体积和复杂性**：\n - 将不必要的依赖项放在`devDependencies`中可以减小项目在生产环境中的体积和复杂性，提高性能和安全性。\n\n**三、`peerDependencies`（对等依赖）**\n\n1. **定义和用途**：\n\n - `peerDependencies` 用于声明当前包所依赖的其他包，但这些依赖项不会被自动安装。\n - 它通常用于插件或扩展的场景，表明当前包与特定版本的其他包兼容，并且期望宿主环境已经安装了这些对等依赖。\n\n2. **示例**：\n\n - 假设你正在开发一个 React 插件，你的插件可能需要特定版本的 React 才能正常工作。在这种情况下，你可以在 `package.json` 的 `peerDependencies` 中声明对 React 的依赖。\n - `\"peerDependencies\": { \"react\": \"^17.0.2\" }` 表示这个插件期望宿主环境安装了 React 17.0.2 或更高的兼容版本。\n\n3. **安装和使用**：\n - 当用户安装你的包时，他们需要确保在自己的项目中手动安装了满足 `peerDependencies` 要求的包。如果没有安装或版本不匹配，可能会导致运行时错误。\n\n**区别总结**：\n\n- **与 `dependencies` 的区别**：\n - `dependencies` 中的依赖项会在安装当前包时自动安装，而 `peerDependencies` 中的依赖项不会自动安装，需要用户在宿主项目中自行安装。\n- **与 `devDependencies` 的区别**：\n - `devDependencies` 是仅在开发过程中使用的依赖项，而 `peerDependencies` 是与当前包在运行时的兼容性相关的依赖项，不一定只在开发过程中使用。\n",{"_58":262,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/1015/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1015/timeline",{"_58":265,"_60":61,"_62":266,"_64":267,"_66":268,"_68":269,"_70":270,"_72":271,"_74":272,"_76":273,"_78":274,"_111":275,"_124":125,"_126":24,"_127":-5,"_128":282,"_130":283,"_152":145,"_146":285,"_148":285,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":286,"_162":287,"_168":288,"_170":289,"_182":291,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/1014","https://api.github.com/repos/pro-collection/interview-question/issues/1014/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1014/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1014/events","https://github.com/pro-collection/interview-question/issues/1014",2597801654,"I_kwDOJGDC6c6a1062",1014,"如何把一个数组随机打乱【热度: 550】",{"_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},[276],{"_70":277,"_72":278,"_58":279,"_117":280,"_119":120,"_121":24,"_122":281},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":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":284,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-10-18T15:14:02Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"**关键词**：数组随机打乱\n\n在 JavaScript 中，可以使用以下几种方法来随机打乱一个数组：\n\n**一、使用`sort`方法结合随机函数**\n\n1. **基本原理**：\n\n - JavaScript 的数组`sort`方法可以接受一个比较函数作为参数。通过提供一个随机的比较函数，可以实现对数组的随机排序，从而打乱数组的顺序。\n\n2. **示例代码**：\n\n```javascript\nconst array = [1, 2, 3, 4, 5];\n\narray.sort(() => Math.random() - 0.5);\n\nconsole.log(array);\n```\n\n在这个例子中，`sort`方法的比较函数每次都会返回一个随机的正负值，使得数组元素的排序顺序完全随机，从而实现数组的随机打乱。\n\n**二、Fisher-Yates 洗牌算法**\n\n1. **基本原理**：\n\n - Fisher-Yates 洗牌算法是一种经典的随机打乱数组的算法。它的基本思想是从数组的最后一个元素开始，随机选择一个位置与当前元素交换，然后逐步向前移动，重复这个过程，直到处理完第一个元素。\n\n2. **示例代码**：\n\n```javascript\nfunction shuffleArray(array) {\n for (let i = array.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n return array;\n}\n\nconst array = [1, 2, 3, 4, 5];\n\nconst shuffledArray = shuffleArray(array);\n\nconsole.log(shuffledArray);\n```\n\n在这个例子中，定义了一个`shuffleArray`函数，该函数使用 Fisher-Yates 洗牌算法随机打乱输入的数组，并返回打乱后的数组。\n",{"_58":290,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/1014/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1014/timeline",{"_58":293,"_60":61,"_62":294,"_64":295,"_66":296,"_68":297,"_70":298,"_72":299,"_74":300,"_76":301,"_78":302,"_111":303,"_124":125,"_126":24,"_127":-5,"_128":312,"_130":313,"_152":145,"_146":315,"_148":316,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":317,"_162":318,"_168":319,"_170":320,"_182":322,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/1013","https://api.github.com/repos/pro-collection/interview-question/issues/1013/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1013/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1013/events","https://github.com/pro-collection/interview-question/issues/1013",2597798104,"I_kwDOJGDC6c6a10DY",1013,"介绍一下 URLSearchParams API【热度: 10】",{"_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},[304,305],{"_70":247,"_72":248,"_58":249,"_117":250,"_119":251,"_121":24,"_122":252},{"_70":306,"_72":307,"_58":308,"_117":309,"_119":310,"_121":24,"_122":311},6294910473,"LA_kwDOJGDC6c8AAAABdzS2CQ","https://api.github.com/repos/pro-collection/interview-question/labels/TOP100%E4%BA%92%E8%81%94%E7%BD%91","TOP100互联网","ededed","公司标签",[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":314,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-10-18T15:12:09Z","2024-10-18T15:12:10Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"**关键词**：URLSearchParams API 介绍\n\n`URLSearchParams`是 JavaScript 中的一个内置 API，用于处理 URL 的查询参数部分。它提供了一系列方法来方便地操作和获取 URL 中的查询参数。\n\n**一、创建`URLSearchParams`对象**\n\n1. **从现有 URL**：\n - 可以从当前页面的 URL 中提取查询参数来创建`URLSearchParams`对象。例如：\n\n```javascript\nconst urlParams = new URLSearchParams(window.location.search);\n```\n\n- 这里使用`window.location.search`获取当前页面 URL 的查询字符串，然后将其传递给`URLSearchParams`构造函数来创建一个新的对象。\n\n2. **从字符串**：\n - 也可以直接从一个查询字符串创建`URLSearchParams`对象。例如：\n\n```javascript\nconst queryString = \"param1=value1¶m2=value2\";\nconst urlParams = new URLSearchParams(queryString);\n```\n\n**二、主要方法**\n\n1. **`get()`方法**：\n - 用于获取指定参数的第一个值。例如：\n\n```javascript\nconst value = urlParams.get(\"paramName\");\n```\n\n- 如果参数不存在，`get()`方法将返回`null`。\n\n2. **`set()`方法**：\n - 设置指定参数的值。如果参数不存在，将添加一个新的参数。例如：\n\n```javascript\nurlParams.set(\"paramName\", \"newValue\");\n```\n\n3. **`append()`方法**：\n - 向现有参数添加一个新的值。如果参数不存在，将添加一个新的参数。例如：\n\n```javascript\nurlParams.append(\"paramName\", \"anotherValue\");\n```\n\n4. **`delete()`方法**：\n - 删除指定参数。例如：\n\n```javascript\nurlParams.delete(\"paramName\");\n```\n\n5. **`has()`方法**：\n - 检查是否存在指定参数。返回一个布尔值。例如：\n\n```javascript\nconst hasParam = urlParams.has(\"paramName\");\n```\n\n6. **遍历参数**：\n - 可以使用`forEach()`方法遍历所有参数。例如：\n\n```javascript\nurlParams.forEach((value, key) => {\n console.log(`${key}: ${value}`);\n});\n```\n\n**三、优点和用途**\n\n1. **方便性**：\n\n - `URLSearchParams`提供了一种简洁、直观的方式来处理 URL 查询参数，避免了手动解析和拼接查询字符串的繁琐过程。\n\n2. **兼容性**：\n\n - 它在现代浏览器中广泛支持，可以在各种前端开发场景中使用。\n\n3. **动态操作**：\n\n - 可以方便地在运行时修改查询参数，例如在单页应用程序中根据用户操作动态更新 URL 的查询参数。\n\n4. **与 URL 对象结合**：\n - 可以与`URL`对象结合使用，方便地构建和操作完整的 URL。例如：\n\n```javascript\nconst url = new URL(\"https://example.com\");\nurl.searchParams.set(\"paramName\", \"value\");\nconsole.log(url.toString());\n```\n\n总之，`URLSearchParams`是一个强大而方便的 API，用于处理 URL 的查询参数，在前端开发中具有广泛的应用。\n",{"_58":321,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/1013/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1013/timeline",{"_58":324,"_60":61,"_62":325,"_64":326,"_66":327,"_68":328,"_70":329,"_72":330,"_74":331,"_76":332,"_78":333,"_111":334,"_124":125,"_126":24,"_127":-5,"_128":336,"_130":337,"_152":145,"_146":339,"_148":340,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":341,"_162":342,"_168":343,"_170":344,"_182":346,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/1012","https://api.github.com/repos/pro-collection/interview-question/issues/1012/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1012/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1012/events","https://github.com/pro-collection/interview-question/issues/1012",2597795893,"I_kwDOJGDC6c6a1zg1",1012,"前端如何快速获取页面 url query 参数【热度: 888】",{"_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},[335],{"_70":247,"_72":248,"_58":249,"_117":250,"_119":251,"_121":24,"_122":252},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":338,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-10-18T15:11:00Z","2024-10-18T15:11:01Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"**关键词**：获取 url 参数\n\n在前端，可以通过以下几种方式快速获取页面 URL 的查询参数：\n\n**一、使用 URLSearchParams API**\n\n1. **基本用法**：\n - `URLSearchParams`是一个内置的 JavaScript API，用于处理 URL 的查询参数。它提供了一种方便的方式来获取、设置和删除查询参数。\n - 首先，可以使用`window.location.search`获取 URL 的查询字符串，然后将其传递给`URLSearchParams`构造函数来创建一个`URLSearchParams`对象。\n - 例如：\n\n```javascript\nconst urlParams = new URLSearchParams(window.location.search);\n```\n\n2. **获取单个参数值**：\n - 可以使用`get`方法来获取指定参数的值。例如，要获取名为`paramName`的参数值，可以使用以下代码：\n\n```javascript\nconst paramValue = urlParams.get(\"paramName\");\n```\n\n3. **遍历所有参数**：\n - 可以使用`forEach`方法来遍历所有的参数。例如：\n\n```javascript\nurlParams.forEach((value, key) => {\n console.log(`${key}: ${value}`);\n});\n```\n\n**二、手动解析查询字符串**\n\n1. **基本思路**：\n\n - 如果不使用`URLSearchParams`，也可以手动解析 URL 的查询字符串。首先，获取`window.location.search`，它包含了查询字符串（例如`?param1=value1¶m2=value2`）。\n - 然后，可以使用字符串的分割和遍历操作来提取参数名和参数值。\n\n2. **示例代码**：\n\n```javascript\nconst queryString = window.location.search.substring(1);\nconst params = {};\nconst paramPairs = queryString.split(\"&\");\nparamPairs.forEach((pair) => {\n const [key, value] = pair.split(\"=\");\n if (key) {\n params[key] = decodeURIComponent(value);\n }\n});\n```\n\n在这个例子中，首先提取查询字符串，然后将其分割成参数对数组。对于每个参数对，再次分割得到参数名和参数值，并将其存储在一个对象中。最后，可以通过`params`对象来访问各个参数的值。\n\n**三、使用第三方库**\n\n1. **库的选择**：\n\n - 有一些第三方库也提供了方便的方法来处理 URL 的查询参数。例如，`qs`库是一个流行的用于处理查询字符串的库。\n - 可以使用`npm`或`yarn`安装`qs`库：`npm install qs`或`yarn add qs`。\n\n2. **使用示例**：\n\n```javascript\nimport qs from \"qs\";\n\nconst queryString = window.location.search.substring(1);\nconst params = qs.parse(queryString);\n```\n\n在这个例子中，使用`qs.parse`方法将查询字符串解析为一个对象，其中键是参数名，值是参数值。\n",{"_58":345,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/1012/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1012/timeline",{"_58":348,"_60":61,"_62":349,"_64":350,"_66":351,"_68":352,"_70":353,"_72":354,"_74":355,"_76":356,"_78":357,"_111":358,"_124":125,"_126":24,"_127":-5,"_128":360,"_130":361,"_152":145,"_146":373,"_148":373,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":374,"_162":375,"_168":376,"_170":377,"_182":379,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/1011","https://api.github.com/repos/pro-collection/interview-question/issues/1011/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1011/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1011/events","https://github.com/pro-collection/interview-question/issues/1011",2597789820,"I_kwDOJGDC6c6a1yB8",1011,"HTML 中的 input 标签有哪些 type【热度: 197】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[359],{"_70":247,"_72":248,"_58":249,"_117":250,"_119":251,"_121":24,"_122":252},[],{"_58":362,"_68":363,"_62":364,"_70":365,"_72":366,"_74":187,"_76":367,"_122":368,"_140":369,"_142":370,"_144":145,"_124":125,"_146":371,"_148":372,"_150":-5,"_151":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/1","https://github.com/pro-collection/interview-question/milestone/1","https://api.github.com/repos/pro-collection/interview-question/milestones/1/labels",9124541,"MI_kwDOJGDC6c4Aizq9","初","初级面试问题",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},79,"2023-03-06T14:59:51Z","2024-11-22T14:22:55Z","2024-10-18T15:07:49Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"**关键词**：input 标签 type 属性\n\nHTML 中的``标签有多种`type`属性值，以下是一些常见的类型：\n\n**一、文本输入类型**\n\n1. `text`：\n\n - 用于输入单行文本。这是最常见的输入类型之一，用户可以在输入框中输入任何文本内容。\n - 例如：``。\n\n2. `password`：\n - 用于输入密码，输入的内容会以掩码形式显示，以保护密码的安全性。\n - 例如：``。\n\n**二、数值输入类型**\n\n1. `number`：\n\n - 用于输入数值。可以设置最小值、最大值、步长等属性来限制输入的范围。\n - 例如：``。\n\n2. `range`：\n - 以滑块的形式显示，用户可以通过拖动滑块来选择一个数值范围内的值。\n - 例如：``。\n\n**三、日期和时间输入类型**\n\n1. `date`：\n\n - 用于选择日期。通常会显示一个日期选择器，方便用户选择日期。\n - 例如：``。\n\n2. `time`：\n\n - 用于选择时间。可以选择小时、分钟和秒。\n - 例如：``。\n\n3. `datetime-local`：\n - 用于选择日期和时间，包括本地时区信息。\n - 例如：``。\n\n**四、选择类型**\n\n1. `checkbox`：\n\n - 复选框，用户可以选择多个选项。\n - 例如：``。\n\n2. `radio`：\n\n - 单选按钮，用户只能选择一个选项。通常多个单选按钮具有相同的`name`属性，以确保只能选择其中一个。\n - 例如：``。\n\n3. `select`：\n - 下拉列表，用户可以从预定义的选项中选择一个值。可以使用`