[{"_1":2,"_1007":-5,"_1008":-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,"_1003":1004},"questions",[57,195,219,254,283,307,336,364,393,433,458,487,512,537,561,585,608,632,656,680,703,728,753,778,802,826,850,882,906,929,953,978],{"_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":161,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":166,"_170":171,"_176":177,"_178":179,"_190":191,"_192":-5,"_193":-5,"_194":144},"url","https://api.github.com/repos/pro-collection/interview-question/issues/434","repository_url","https://api.github.com/repos/pro-collection/interview-question","labels_url","https://api.github.com/repos/pro-collection/interview-question/issues/434/labels{/name}","comments_url","https://api.github.com/repos/pro-collection/interview-question/issues/434/comments","events_url","https://api.github.com/repos/pro-collection/interview-question/issues/434/events","html_url","https://github.com/pro-collection/interview-question/issues/434","id",1748147976,"node_id","I_kwDOJGDC6c5oMp8I","number",434,"title","Object.is() 与比较操作符 “===”、“==” 有什么区别【热度: 1,425】","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},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","name","JavaScript","color","A4D8FB","default","description","JavaScript 语法部分",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},5316900032,"LA_kwDOJGDC6c8AAAABPOl0wA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BA%AC%E4%B8%9C","京东","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/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",1,"初","初级面试问题","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",79,"closed_issues",0,"created_at","2023-03-06T14:59:51Z","updated_at","2024-11-22T14:22:55Z","due_on","closed_at","comments","2023-06-08T15:26:20Z","2023-06-08T15:26:50Z","author_association","MEMBER","active_lock_reason","sub_issues_summary",{"_167":152,"_168":152,"_169":152},"total","completed","percent_completed","issue_dependencies_summary",{"_172":152,"_173":152,"_174":152,"_175":152},"blocked_by","total_blocked_by","blocking","total_blocking","body","**关键词**：Object.is()、js 相等比较\n\n`Object.is()` 方法和比较操作符 \"===\"、\"==\" 用于比较两个值的相等性，但它们在比较方式和行为上有一些区别。\n\n1. `Object.is()` 方法是严格相等比较，而 \"===\" 操作符也是严格相等比较，但 \"==\" 操作符是相等比较。\n - 严格相等比较（`===`）要求比较的两个值在类型和值上完全相同才会返回 `true`。\n - 相等比较（`==`）会进行类型转换，将两个值转换为相同类型后再进行比较。\n\n2. `Object.is()` 方法对于一些特殊的值比较更准确：\n - 对于 NaN 和 NaN 的比较，`Object.is(NaN, NaN)` 返回 `true`，而 `NaN === NaN` 返回 `false`。\n - 对于 +0 和 -0 的比较，`Object.is(+0, -0)` 返回 `false`，而 `+0 === -0` 返回 `true`。\n\n下面是一些示例：\n\n```javascript\nconsole.log(Object.is(1, 1)); // true\nconsole.log(Object.is('foo', 'foo')); // true\nconsole.log(Object.is(true, true)); // true\n\nconsole.log(Object.is(null, null)); // true\nconsole.log(Object.is(undefined, undefined)); // true\n\nconsole.log(Object.is(NaN, NaN)); // true\nconsole.log(NaN === NaN); // false\n\nconsole.log(Object.is(+0, -0)); // false\nconsole.log(+0 === -0); // true\n\nconsole.log(Object.is({}, {})); // false\nconsole.log({} === {}); // false\n```\n\n`Object.is()` 方法更精确地比较两个值的相等性，尤其是在处理一些特殊的值时，而 \"===\" 操作符和 \"==\" 操作符则具有不同的类型转换行为和比较规则。\n","reactions",{"_58":180,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/434/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/434/timeline","performed_via_github_app","state_reason","score",{"_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":208,"_137":209,"_159":152,"_153":211,"_155":212,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":213,"_170":214,"_176":215,"_178":216,"_190":218,"_192":-5,"_193":-5,"_194":144},"https://api.github.com/repos/pro-collection/interview-question/issues/433","https://api.github.com/repos/pro-collection/interview-question/issues/433/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/433/comments","https://api.github.com/repos/pro-collection/interview-question/issues/433/events","https://github.com/pro-collection/interview-question/issues/433",1748135789,"I_kwDOJGDC6c5oMm9t",433,"js 函数有默认值的时候，如果传递的参数是 undefined 那么会被默认值赋值吗？",{"_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],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":210,"_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-06-08T15:21:50Z","2023-06-08T15:26:59Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"是的，如果函数在调用时某个参数被传递为 `undefined`，那么它会被默认值赋值。\n\n当为函数的参数设置默认值时，只有当参数的值为 `undefined` 时才会生效。如果传递的参数为 `null`、空字符串 `''` 或者未提供参数，则默认值不会被应用。\n\n以下是一个示例：\n\n```javascript\nfunction greet(name = 'Guest') {\n console.log(`Hello, ${name}!`);\n}\n\ngreet('John'); // 输出: Hello, John!\ngreet(undefined); // 输出: Hello, Guest!\ngreet(); // 输出: Hello, Guest!\n```\n\n在上面的例子中，当参数 `name` 被传递为 `undefined` 或者未提供时，它会被默认值 `'Guest'` 赋值，从而在函数内部输出 `'Hello, Guest!'`。\n\n\n如果传递的参数为 `null`，默认值不会被应用。当函数的参数被显式传递为 `null` 时，它将被视为有效的值，不会触发默认值的赋值。\n\n以下是一个示例：\n\n```javascript\nfunction greet(name = 'Guest') {\n console.log(`Hello, ${name}!`);\n}\n\ngreet(null); // 输出: Hello, null!\n```\n\n在上面的例子中，参数 `name` 被显式传递为 `null`，因此默认值 `'Guest'` 不会被应用，而是使用了传递的 `null` 值。所以输出结果为 `'Hello, null!'`。\n",{"_58":217,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/433/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/433/timeline",{"_58":220,"_60":61,"_62":221,"_64":222,"_66":223,"_68":224,"_70":225,"_72":226,"_74":227,"_76":228,"_78":229,"_111":230,"_131":132,"_133":24,"_134":-5,"_135":232,"_137":233,"_159":152,"_153":246,"_155":247,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":248,"_170":249,"_176":250,"_178":251,"_190":253,"_192":-5,"_193":-5,"_194":144},"https://api.github.com/repos/pro-collection/interview-question/issues/432","https://api.github.com/repos/pro-collection/interview-question/issues/432/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/432/comments","https://api.github.com/repos/pro-collection/interview-question/issues/432/events","https://github.com/pro-collection/interview-question/issues/432",1748086159,"I_kwDOJGDC6c5oMa2P",432,"typeof null 的结果是什么，为什么？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[231],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":234,"_68":235,"_62":236,"_70":237,"_72":238,"_74":239,"_76":240,"_122":241,"_147":242,"_149":243,"_151":152,"_131":132,"_153":244,"_155":245,"_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,"中","中级程序面试问题",{"_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},510,"2023-03-06T15:00:15Z","2025-09-07T06:08:31Z","2023-06-08T14:59:38Z","2023-06-08T14:59:39Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"`typeof null` 的结果是 `\"object\"`。\n\n这是 JavaScript 中的一个历史遗留问题。在 JavaScript 最初的实现中，将 JavaScript 的值分为了几种类型，其中 `null` 被当作一个空对象指针。为了与其他对象类型区分开，`typeof null` 返回了 `\"object\"`。\n\n实际上，`null` 是一个表示空值的特殊值，它不是对象，也不是任何对象的实例。虽然 `typeof null` 返回了 `\"object\"`，但这并不表示 `null` 是对象的一种类型。\n\n由于这个历史遗留问题，判断一个值是否为 `null` 通常需要使用 `value === null` 进行比较，而不是依赖 `typeof` 运算符的结果。\n",{"_58":252,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/432/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/432/timeline",{"_58":255,"_60":61,"_62":256,"_64":257,"_66":258,"_68":259,"_70":260,"_72":261,"_74":262,"_76":263,"_78":264,"_111":265,"_131":132,"_133":24,"_134":-5,"_135":272,"_137":273,"_159":144,"_153":275,"_155":276,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":277,"_170":278,"_176":279,"_178":280,"_190":282,"_192":-5,"_193":-5,"_194":144},"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},[266,267],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":268,"_72":269,"_58":270,"_117":271,"_119":129,"_121":24,"_122":130},5312214934,"LA_kwDOJGDC6c8AAAABPKH3lg","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E6%98%93","网易",[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":274,"_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-06-08T14:58:10Z","2024-06-26T10:02:38Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：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":281,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"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":284,"_60":61,"_62":285,"_64":286,"_66":287,"_68":288,"_70":289,"_72":290,"_74":291,"_76":292,"_78":293,"_111":294,"_131":132,"_133":24,"_134":-5,"_135":296,"_137":297,"_159":152,"_153":299,"_155":300,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":301,"_170":302,"_176":303,"_178":304,"_190":306,"_192":-5,"_193":-5,"_194":144},"https://api.github.com/repos/pro-collection/interview-question/issues/397","https://api.github.com/repos/pro-collection/interview-question/issues/397/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/397/comments","https://api.github.com/repos/pro-collection/interview-question/issues/397/events","https://github.com/pro-collection/interview-question/issues/397",1734541537,"I_kwDOJGDC6c5nYwDh",397,"了解哪些基础算法",{"_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},[295],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":234,"_68":235,"_62":236,"_70":237,"_72":238,"_74":239,"_76":240,"_122":241,"_147":298,"_149":243,"_151":152,"_131":132,"_153":244,"_155":245,"_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-31T15:59:30Z","2023-05-31T15:59:49Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"6 种基础算法思想\n\n- 递归算法\n- 分治算法\n- 贪心算法\n- 回溯算法\n- 动态规划\n- 枚举算法\n\n**参考文档**: https://www.toutiao.com/article/7199435823970828857\n\n",{"_58":305,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/397/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/397/timeline",{"_58":308,"_60":61,"_62":309,"_64":310,"_66":311,"_68":312,"_70":313,"_72":314,"_74":315,"_76":316,"_78":317,"_111":318,"_131":132,"_133":24,"_134":-5,"_135":325,"_137":326,"_159":152,"_153":328,"_155":329,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":330,"_170":331,"_176":332,"_178":333,"_190":335,"_192":-5,"_193":-5,"_194":144},"https://api.github.com/repos/pro-collection/interview-question/issues/389","https://api.github.com/repos/pro-collection/interview-question/issues/389/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/389/comments","https://api.github.com/repos/pro-collection/interview-question/issues/389/events","https://github.com/pro-collection/interview-question/issues/389",1732536550,"I_kwDOJGDC6c5nRGjm",389,"JS 作用域链链接多少?【热度: 882】",{"_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},[319,320],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":321,"_72":322,"_58":323,"_117":324,"_119":129,"_121":24,"_122":130},5342931240,"LA_kwDOJGDC6c8AAAABPnapKA","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BE%8E%E5%9B%A2","美团",[],{"_58":234,"_68":235,"_62":236,"_70":237,"_72":238,"_74":239,"_76":240,"_122":241,"_147":327,"_149":243,"_151":152,"_131":132,"_153":244,"_155":245,"_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-30T15:48:36Z","2023-05-30T15:48:37Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：JS 作用域链链、JS 作用域链链应用\n\n### 概念\n\nJavaScript 作用域链（Scope Chain）是指变量和函数的可访问性和查找规则。它是由多个执行上下文（Execution Context）的变量对象（Variable Object）按照它们被创建的顺序组成的链式结构。\n\n在 JavaScript 中，每个函数都会创建一个新的执行上下文，并将其添加到作用域链的最前端。当访问一个变量时，JavaScript 引擎会先从当前执行上下文的变量对象开始查找，如果找不到，则沿着作用域链依次向上查找，直到全局执行上下文的变量对象。\n\n作用域链的创建过程如下：\n1. 在函数定义时，会创建一个变量对象（VO）来存储函数的变量和函数声明。这个变量对象包含了当前函数的作用域中的变量和函数。\n2. 在函数执行时，会创建一个执行上下文（Execution Context），并将其添加到作用域链的最前端。执行上下文中的变量对象称为活动对象（Active Object）。\n3. 当访问一个变量时，JavaScript 引擎首先会在活动对象中查找，如果找不到，则沿着作用域链依次向上查找，直到全局执行上下文的变量对象。\n4. 如果在作用域链的任何一个环节找到了变量，则停止查找并返回变量的值；如果未找到，则抛出引用错误（ReferenceError）。\n\n作用域链的特点：\n1. 作用域链是一个静态的概念，它在函数定义时就确定了，不会随着函数的调用而改变。\n2. 作用域链是由多个执行上下文的变量对象按照它们被创建的顺序组成的。\n3. 作用域链的最后一个变量对象是全局执行上下文的变量对象，它是作用域链的终点。\n4. 内部函数可以访问外部函数的变量，因为内部函数的作用域链包含了外部函数的变量对象。\n\n\n### 有哪些应用场景\n\n作用域链在 JavaScript 中具有广泛的应用场景。下面列举了一些常见的应用场景：\n\n1. 变量查找：作用域链决定了变量的访问顺序，当访问一个变量时，会按照作用域链的顺序依次查找变量，直到找到匹配的变量或到达全局作用域。\n\n2. 闭包：闭包是指函数能够访问和操作它的外部函数中定义的变量。通过作用域链，内部函数可以访问外部函数的变量，实现了闭包的特性。闭包在许多场景中用于创建私有变量和实现函数封装。\n\n3. 垃圾回收：JavaScript 的垃圾回收机制通过作用域链来判断变量的生命周期。当变量不再被引用时，垃圾回收器可以回收它所占用的内存空间。\n\n4. 函数作为参数传递：在 JavaScript 中，可以将函数作为参数传递给其他函数。在传递过程中，作用域链决定了内部函数对外部函数变量的访问权限，实现了回调函数和高阶函数的功能。\n\n5. 面向对象编程：JavaScript 中的对象和原型链是基于作用域链实现的。通过原型链，对象可以访问和继承其原型对象的属性和方法。\n\n6. 模块化开发：作用域链可以用于实现模块化开发，通过定义私有变量和公共接口，控制模块内部变量的可访问性，避免变量冲突和全局污染。\n\n7. 作用域链的动态改变：在 JavaScript 中，可以通过闭包和动态作用域的特性来改变作用域链。例如，使用 eval() 函数或 with 语句可以改变当前的作用域链。\n\n总之，作用域链在 JavaScript 中扮演了重要的角色，涵盖了变量的访问、闭包、垃圾回收、模块化开发等多个方面。深入理解作用域链对于编写高质量的 JavaScript 代码和理解其底层工作原理非常重要。\n",{"_58":334,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/389/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/389/timeline",{"_58":337,"_60":61,"_62":338,"_64":339,"_66":340,"_68":341,"_70":342,"_72":343,"_74":344,"_76":345,"_78":346,"_111":347,"_131":132,"_133":24,"_134":-5,"_135":354,"_137":355,"_159":152,"_153":357,"_155":357,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":358,"_170":359,"_176":360,"_178":361,"_190":363,"_192":-5,"_193":-5,"_194":144},"https://api.github.com/repos/pro-collection/interview-question/issues/388","https://api.github.com/repos/pro-collection/interview-question/issues/388/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/388/comments","https://api.github.com/repos/pro-collection/interview-question/issues/388/events","https://github.com/pro-collection/interview-question/issues/388",1732517642,"I_kwDOJGDC6c5nRB8K",388,"哪些原因会导致js里this指向混乱?【热度: 1,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},[348,349],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":350,"_72":351,"_58":352,"_117":353,"_119":129,"_121":24,"_122":130},5326133419,"LA_kwDOJGDC6c8AAAABPXZYqw","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B0%8F%E7%B1%B3","小米",[],{"_58":234,"_68":235,"_62":236,"_70":237,"_72":238,"_74":239,"_76":240,"_122":241,"_147":356,"_149":243,"_151":152,"_131":132,"_153":244,"_155":245,"_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-30T15:36:19Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：js 指向\n\nJavaScript 中 this 指向混乱的原因主要有以下几个：\n\n1. 函数调用方式不同：JavaScript 中函数的调用方式决定了 this 的指向。常见的函数调用方式有函数调用、方法调用、构造函数调用和箭头函数调用。不同的调用方式会导致 this 指向不同的对象，容易引发混乱。\n\n2. 丢失绑定：当函数作为一个独立的变量传递时，或者作为回调函数传递给其他函数时，函数内部的 this 可能会丢失绑定。这意味着函数中的 this 不再指向原来的对象，而是指向全局对象（在浏览器环境中通常是 window 对象）或 undefined（在严格模式下）。\n\n3. 嵌套函数：当函数嵌套在其他函数内部时，嵌套函数中的 this 通常会与外部函数的 this 不同。这可能导致 this 的指向出现混乱，特别是在多层嵌套的情况下。\n\n4. 使用 apply、call 或 bind 方法：apply、call 和 bind 是 JavaScript 中用于显式指定函数的 this 的方法。如果不正确使用这些方法，比如传递了错误的上下文对象，就会导致 this 指向错误。\n\n5. 箭头函数：箭头函数具有词法作用域的 this 绑定，它会捕获其所在上下文的 this 值，而不是动态绑定 this。因此，在箭头函数中使用 this 时，它指向的是箭头函数声明时的上下文，而不是调用时的上下文。\n\n为了避免 this 指向混乱的问题，可以采取以下措施：\n\n- 使用箭头函数，确保 this 始终指向期望的上下文。\n- 在函数调用时，确保正确设置了函数的上下文对象，可以使用 bind、call 或 apply 方法。\n- 使用严格模式，避免函数内部的 this 默认绑定到全局对象。\n- 在嵌套函数中，使用箭头函数或者显式保存外部函数的 this 值，以避免内部函数的 this 指向错误。\n\n理解和正确处理 this 的指向是 JavaScript 开发中重要的一环，它能帮助我们避免许多常见的错误和混乱。\n",{"_58":362,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/388/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/388/timeline",{"_58":365,"_60":61,"_62":366,"_64":367,"_66":368,"_68":369,"_70":370,"_72":371,"_74":372,"_76":373,"_78":374,"_111":375,"_131":132,"_133":24,"_134":-5,"_135":382,"_137":383,"_159":152,"_153":385,"_155":386,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":387,"_170":388,"_176":389,"_178":390,"_190":392,"_192":-5,"_193":-5,"_194":144},"https://api.github.com/repos/pro-collection/interview-question/issues/387","https://api.github.com/repos/pro-collection/interview-question/issues/387/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/387/comments","https://api.github.com/repos/pro-collection/interview-question/issues/387/events","https://github.com/pro-collection/interview-question/issues/387",1732510704,"I_kwDOJGDC6c5nRAPw",387,"Generator 是如何做到中断和恢复的【热度: 1,558】",{"_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},[376,377],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":378,"_72":379,"_58":380,"_117":381,"_119":129,"_121":24,"_122":130},5312738037,"LA_kwDOJGDC6c8AAAABPKny9Q","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%99%BE%E5%BA%A6","百度",[],{"_58":234,"_68":235,"_62":236,"_70":237,"_72":238,"_74":239,"_76":240,"_122":241,"_147":384,"_149":243,"_151":152,"_131":132,"_153":244,"_155":245,"_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-30T15:32:05Z","2023-05-30T15:32:06Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：Generator 中断、Generator 回复\n\nGenerator 是 JavaScript 中一种特殊的函数，它能够通过迭代器协议（Iterator Protocol）实现中断和恢复的功能。\n\nGenerator 函数使用 `function*` 声明，内部可以使用 `yield` 关键字来定义中断点。当调用 Generator 函数时，它不会立即执行，而是返回一个迭代器对象。通过调用迭代器的 `next()` 方法，可以逐步执行 Generator 函数，并在每个 `yield` 关键字处暂停执行并返回一个包含当前值的对象。\n\n当调用 `next()` 方法时，Generator 函数会从上次暂停的地方继续执行，直到遇到下一个 `yield` 关键字或函数结束。通过不断调用 `next()` 方法，可以逐步执行 Generator 函数的代码，并获取每个中断点处的值。\n\n由于 Generator 函数具有中断和恢复的特性，可以用于异步编程，实现一种更直观的方式来处理异步操作。通过 `yield` 关键字，可以将异步操作分割成多个步骤，每个步骤都可以通过 `yield` 暂停，等待异步操作完成后再恢复执行。\n\n以下是一个简单的示例，展示了 Generator 函数的中断和恢复特性：\n\n```javascript\nfunction* generatorFunction() {\n console.log('Step 1');\n yield;\n console.log('Step 2');\n yield;\n console.log('Step 3');\n}\n\nconst generator = generatorFunction();\n\ngenerator.next(); // Step 1\ngenerator.next(); // Step 2\ngenerator.next(); // Step 3\n```\n\n在上述示例中，我们定义了一个名为 `generatorFunction` 的 Generator 函数。在函数体内，使用 `console.log` 打印了三个不同的步骤，并在每个步骤后使用 `yield` 关键字暂停执行。然后，我们通过调用 `generator.next()` 方法逐步执行 Generator 函数。每次调用 `next()` 方法时，函数会从上次暂停的地方恢复执行，打印相应的步骤。\n\n通过使用 Generator 函数，可以实现更灵活、可控的异步编程模式，提供更好的代码可读性和维护性。\n",{"_58":391,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/387/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/387/timeline",{"_58":394,"_60":61,"_62":395,"_64":396,"_66":397,"_68":398,"_70":399,"_72":400,"_74":401,"_76":402,"_78":403,"_111":404,"_131":132,"_133":24,"_134":-5,"_135":411,"_137":412,"_159":144,"_153":425,"_155":426,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":427,"_170":428,"_176":429,"_178":430,"_190":432,"_192":-5,"_193":-5,"_194":144},"https://api.github.com/repos/pro-collection/interview-question/issues/385","https://api.github.com/repos/pro-collection/interview-question/issues/385/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/385/comments","https://api.github.com/repos/pro-collection/interview-question/issues/385/events","https://github.com/pro-collection/interview-question/issues/385",1732490915,"I_kwDOJGDC6c5nQ7aj",385,"使用 Promise 实现一个异步流量控制的函数(限制并发数)【热度: 517】",{"_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},[405,406],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":407,"_72":408,"_58":409,"_117":410,"_119":129,"_121":24,"_122":130},5312726360,"LA_kwDOJGDC6c8AAAABPKnFWA","https://api.github.com/repos/pro-collection/interview-question/labels/%E8%85%BE%E8%AE%AF","腾讯",[],{"_58":413,"_68":414,"_62":415,"_70":416,"_72":417,"_74":418,"_76":419,"_122":420,"_147":421,"_149":422,"_151":152,"_131":132,"_153":423,"_155":424,"_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","2023-05-30T15:19:35Z","2023-06-26T16:04:07Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：异步流量控制的函数\n\n下面是使用 Promise 实现异步流量控制的函数的示例：\n\n```javascript\nfunction asyncFlowControl(tasks, limit) {\n let runningCount = 0; // 当前正在运行的任务数\n let index = 0; // 当前执行的任务索引\n const results = []; // 存储任务的结果\n\n return new Promise((resolve, reject) => {\n function runTask() {\n if (runningCount >= limit || index >= tasks.length) {\n // 达到并发限制或所有任务已执行完毕，返回结果\n if (results.length === tasks.length) {\n resolve(results);\n }\n return;\n }\n\n const task = tasks[index];\n const currentIndex = index; // 保存当前任务索引\n\n index++;\n runningCount++;\n\n task().then((result) => {\n results[currentIndex] = result; // 存储任务结果\n runningCount--;\n runTask(); // 递归执行下一个任务\n }).catch((error) => {\n reject(error);\n });\n\n runTask(); // 递归执行下一个任务\n }\n\n runTask(); // 开始执行任务\n });\n}\n\n// 示例用法\nfunction asyncTask(value) {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log(value);\n resolve(value);\n }, Math.random() * 1000);\n });\n}\n\nconst tasks = [\n () => asyncTask(1),\n () => asyncTask(2),\n () => asyncTask(3),\n () => asyncTask(4),\n () => asyncTask(5),\n];\n\nasyncFlowControl(tasks, 2).then((results) => {\n console.log('All tasks completed:', results);\n}).catch((error) => {\n console.error('Error occurred:', error);\n});\n```\n\n以上示例中的 `asyncFlowControl` 函数接受一个任务数组 `tasks` 和一个并发限制 `limit`，它会按照并发限制逐个执行任务，并返回一个 Promise 对象。在示例中，任务数组中的每个任务都是一个返回 Promise 的函数，通过 `setTimeout` 模拟异步操作。\n\n在执行过程中，`asyncFlowControl` 函数会维护一个 `runningCount` 变量来跟踪当前正在运行的任务数，并使用递归的方式执行任务。当达到并发限制或所有任务都已执行完毕时，函数会返回结果。\n\n通过控制并发任务的数量，我们可以限制同时执行的异步操作，实现异步流量控制。在上述示例中，设置并发限制为 2，可以确保最多同时执行 2 个任务，并在任务执行完毕后再执行下一个任务。\n",{"_58":431,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/385/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/385/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,"_162":163,"_106":-5,"_164":-5,"_165":452,"_170":453,"_176":454,"_178":455,"_190":457,"_192":-5,"_193":-5,"_194":144},"https://api.github.com/repos/pro-collection/interview-question/issues/371","https://api.github.com/repos/pro-collection/interview-question/issues/371/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/371/comments","https://api.github.com/repos/pro-collection/interview-question/issues/371/events","https://github.com/pro-collection/interview-question/issues/371",1722241499,"I_kwDOJGDC6c5mp1Hb",371,"Object.prototype.hasOwnProperty() 作用是啥【热度: 1,176】",{"_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":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":350,"_72":351,"_58":352,"_117":353,"_119":129,"_121":24,"_122":130},[],{"_58":234,"_68":235,"_62":236,"_70":237,"_72":238,"_74":239,"_76":240,"_122":241,"_147":449,"_149":243,"_151":152,"_131":132,"_153":244,"_155":245,"_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-23T14:49:31Z","2023-05-23T14:49:32Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：Object.prototype.hasOwnProperty\n\n### `Object.prototype.hasOwnProperty()`\n\n`Object.prototype.hasOwnProperty()`是JavaScript中`Object`原型对象上的方法。它用于检查一个对象是否具有指定的属性（即对象自身拥有的属性），并返回一个布尔值表示结果。\n\n`hasOwnProperty()`方法的作用是检查对象是否包含特定的属性，而不会考虑该属性是否继承自原型链。它接受一个字符串参数，表示要检查的属性名。如果对象自身拥有该属性，则返回`true`；如果对象没有该属性或该属性是从原型链继承的，则返回`false`。\n\n以下是`hasOwnProperty()`方法的使用示例：\n\n```javascript\nconst obj = {\n prop1: 'value1',\n prop2: 'value2',\n};\n\nconsole.log(obj.hasOwnProperty('prop1')); // true\nconsole.log(obj.hasOwnProperty('prop3')); // false\n```\n\n在上述示例中，`obj`对象拥有`prop1`属性，因此`obj.hasOwnProperty('prop1')`返回`true`。然而，`obj`对象没有`prop3`属性，因此`obj.hasOwnProperty('prop3')`返回`false`。\n\n使用`hasOwnProperty()`方法可以帮助我们确定属性是对象自身的属性还是继承自原型链。这在进行属性遍历或属性存在性检查时非常有用。请注意，`hasOwnProperty()`方法只能检查对象自身的属性，不能检查原型链上的属性。如果需要检查原型链上的属性，可以使用`in`运算符或`Object.prototype.hasOwnProperty.call()`方法。\n\n\n### `hasOwnProperty`和`instanceof` 区别\n\n`hasOwnProperty`和`instanceof`是两个不同的操作符，用于在JavaScript中进行不同类型的检查。\n\n1. `hasOwnProperty`：`hasOwnProperty`是`Object`原型对象上的方法，用于检查一个对象是否具有指定的属性（即对象自身拥有的属性），并返回一个布尔值表示结果。它是针对对象属性的检查。\n\n2. `instanceof`：`instanceof`是JavaScript的一个操作符，用于检查一个对象是否是某个构造函数的实例。它用于检查对象的类型。\n\n以下是两者之间的区别：\n\n* `hasOwnProperty`是用于检查对象是否具有特定的属性，它关注的是对象自身的属性，不涉及对象的类型。它只检查对象自身的属性，不会检查原型链上的属性。\n\n* `instanceof`是用于检查对象是否是某个构造函数的实例，它关注的是对象的类型。它会检查对象的原型链上是否存在指定构造函数的原型对象。\n\n使用示例：\n\n```javascript\nconst obj = {\n prop: 'value'\n};\n\nconsole.log(obj.hasOwnProperty('prop')); // true\n\nconsole.log(obj instanceof Object); // true\nconsole.log(obj instanceof Array); // false\n```\n\n在上述示例中，`obj`对象拥有`prop`属性，因此`obj.hasOwnProperty('prop')`返回`true`。同时，`obj`对象是`Object`构造函数的实例，因此`obj instanceof Object`返回`true`，但不是`Array`构造函数的实例，因此`obj instanceof Array`返回`false`。\n\n总结而言，`hasOwnProperty`用于检查对象是否拥有特定的属性，而`instanceof`用于检查对象的类型。\n",{"_58":456,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/371/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/371/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":476,"_137":477,"_159":152,"_153":479,"_155":480,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":481,"_170":482,"_176":483,"_178":484,"_190":486,"_192":-5,"_193":-5,"_194":144},"https://api.github.com/repos/pro-collection/interview-question/issues/363","https://api.github.com/repos/pro-collection/interview-question/issues/363/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/363/comments","https://api.github.com/repos/pro-collection/interview-question/issues/363/events","https://github.com/pro-collection/interview-question/issues/363",1719794901,"I_kwDOJGDC6c5mgfzV",363,"模版引擎实现原理【热度: 1,241】",{"_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,471],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":472,"_72":473,"_58":474,"_117":475,"_119":129,"_121":24,"_122":130},5312231007,"LA_kwDOJGDC6c8AAAABPKI2Xw","https://api.github.com/repos/pro-collection/interview-question/labels/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4","阿里巴巴",[],{"_58":413,"_68":414,"_62":415,"_70":416,"_72":417,"_74":418,"_76":419,"_122":420,"_147":478,"_149":422,"_151":152,"_131":132,"_153":423,"_155":424,"_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-22T14:15:21Z","2023-05-22T14:15:22Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：模版引擎\n\n### 前端模板引擎实现原理\n\n前端模板引擎是一种用于处理 HTML 字符串的工具，它允许开发人员在 HTML 中嵌入特殊语法，然后使用模板引擎把数据与这些语法结合，生成最终的 HTML 字符串。这种方式有助于实现数据与表示的分离，使得代码更易于维护。\n\n前端模板引擎的实现原理通常包括以下几个步骤：\n\n1. **编译模板**：将模板字符串解析成模板语法（如变量、循环、条件等）和普通文本。这个过程通常涉及到词法分析和语法分析两个阶段。词法分析将模板字符串切分成多个标记（Token），再通过语法分析将这些标记组织成抽象语法树（AST）。\n\n2. **生成代码**：将抽象语法树转换成 JavaScript 代码。这个过程通常包括将语法节点（AST Nodes）转换成相应的 JavaScript 语句，以渲染数据的形式。\n\n3. **执行代码**：对生成的 JavaScript 代码进行求值，通过传入模板数据，渲染最终的 HTML 字符串。\n\n下面是一个简单的模板引擎实现示例：\n\n```javascript\nfunction simpleTemplateEngine(template, data) {\nconst variableRegex = /{{\\s*([\\w]+)\\s*}}/g; // 匹配变量插值\n\nlet match;\nlet lastIndex = 0;\nlet result = '';\n\nwhile ((match = variableRegex.exec(template)) !== null) {\nresult += template.slice(lastIndex, match.index); // 添加文本\nresult += data[match[1]]; // 添加变量值\nlastIndex = match.index + match[0].length;\n}\n\nresult += template.slice(lastIndex); // 添加尾部文本\nreturn result;\n}\n\n// 使用示例\nconst template = 'Hello, {{name}}! Today is {{day}}.';\nconst data = {\nname: 'John',\nday: 'Monday',\n};\n\nconsole.log(simpleTemplateEngine(template, data)); // 输出：Hello, John! Today is Monday.\n```\n\n这个简化的示例仅支持变量插值，完整的模板引擎需要考虑循环、条件、自定义函数等更复杂的语法和性能优化。在实际项目中，可以选择成熟的模板引擎库，例如 Handlebars、Mustache 或者 Lodash 的 `template` 函数。\n\n\n### 如何在模板引擎中实现条件判断\n\n要在模板引擎中实现条件判断，你需要扩展模板引擎的语法支持和解析能力。以 Handlebars 为例，其中的 `if` 和 `else` 助手语法可以实现条件判断。首先，我们需要修改匹配变量的正则表达式以识别条件判断语句。接着，在解析过程中，根据条件判断结果添加相应的内容。\n\n以下代码实现了一个简化的模板引擎，支持条件判断：\n\n```javascript\nfunction parseTemplate(template, data) {\n const tokenRegex = /{{\\s*(\\/?[\\w\\s]+\\/?)\\s*}}/g; // 匹配模板语法 token\n const keywords = /^(if|\\/if|else)$/;\n let result = '';\n const stack = [];\n\n let lastIndex = 0;\n let match;\n\n while ((match = tokenRegex.exec(template)) !== null) {\n let staticContent = template.substring(lastIndex, match.index);\n result += staticContent;\n lastIndex = match.index + match[0].length;\n\n const token = match[1].trim();\n const keywordMatch = token.match(keywords);\n\n if (!keywordMatch) { // 处理变量插值\n result += data[token];\n continue;\n }\n\n switch (keywordMatch[0]) {\n case 'if':\n stack.push('if');\n const ifCondition = data[token.split(' ')[1]];\n if (ifCondition) {\n tokenRegex.lastIndex += processSubTemplate(stack, tokenRegex, template, data);\n }\n break;\n case 'else':\n stack.push('else');\n tokenRegex.lastIndex += processSubTemplate(stack, tokenRegex, template, data);\n break;\n case '/if':\n stack.pop();\n break;\n }\n }\n\n result += template.substring(lastIndex);\n return result;\n}\n\nfunction processSubTemplate(stack, tokenRegex, template, data) {\n let subTemplate = '';\n let cursor = tokenRegex.lastIndex;\n\n while (stack.length && cursor < template.length) {\n cursor++;\n const char = template[cursor];\n subTemplate += char;\n\n if (char === '}' && template[cursor - 1] === '}') {\n const lastTwo = template.substring(cursor - 2, cursor);\n if (lastTwo === '{{') {\n const match = subTemplate.match(/{{\\s*(\\/?[\\w\\s]+\\/?)\\s*}}/);\n if (match) {\n const token = match[1].trim();\n const keywordMatch = token.match(/^(if|\\/if|else)$/);\n if (keywordMatch) {\n if (keywordMatch[0] === stack[stack.length - 1]) {\n stack.pop();\n } else {\n stack.push(keywordMatch[0]);\n }\n }\n }\n }\n }\n }\n\n if (stack[stack.length - 1] === 'else') {\n stack.pop();\n }\n\n return subTemplate.length;\n}\n\n// 使用示例\nconst template = `\n {{name}},\n {{if isMember}}\n Welcome back, {{name}}!\n {{else}}\n Please join us!\n {{/if}}\n`;\n\nconst data = {\n name: \"John\",\n isMember: true,\n};\n\nconsole.log(parseTemplate(template, data).trim());\n```\n\n这个简化示例说明了如何在模板中实现条件判断。不过请注意，这个实现并没有经过优化，性能可能不佳。在实际项目中，推荐使用成熟的模板引擎库，如 Handlebars、Mustache 等。\n",{"_58":485,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/363/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/363/timeline",{"_58":488,"_60":61,"_62":489,"_64":490,"_66":491,"_68":492,"_70":493,"_72":494,"_74":495,"_76":496,"_78":497,"_111":498,"_131":132,"_133":24,"_134":-5,"_135":501,"_137":502,"_159":152,"_153":504,"_155":505,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":506,"_170":507,"_176":508,"_178":509,"_190":511,"_192":-5,"_193":-5,"_194":144},"https://api.github.com/repos/pro-collection/interview-question/issues/362","https://api.github.com/repos/pro-collection/interview-question/issues/362/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/362/comments","https://api.github.com/repos/pro-collection/interview-question/issues/362/events","https://github.com/pro-collection/interview-question/issues/362",1719679486,"I_kwDOJGDC6c5mgDn-",362,"手写 JSON.stringify 和手写 JSON.parse 实现【热度: 134】",{"_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},[499,500],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":268,"_72":269,"_58":270,"_117":271,"_119":129,"_121":24,"_122":130},[],{"_58":234,"_68":235,"_62":236,"_70":237,"_72":238,"_74":239,"_76":240,"_122":241,"_147":503,"_149":243,"_151":152,"_131":132,"_153":244,"_155":245,"_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-22T13:17:27Z","2023-05-22T13:17:28Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：手写 JSON.stringify、手写 JSON.parse\n\n### 手写`JSON.stringify`\n\n`JSON.stringify` 是一个将 JavaScript 对象或值转换为 JSON 字符串的函数。下面是一个简化的实现，主要考虑以下几种类型：字符串、数字、布尔值、对象和数组。\n\n```javascript\nfunction jsonStringify(value) {\n const type = typeof value;\n\n if (type === 'string') {\n return `\"${value}\"`;\n }\n\n if (type === 'number' || type === 'boolean' || value === null) {\n return String(value);\n }\n\n if (type === 'object') {\n if (Array.isArray(value)) {\n const arrayItems = value.map((item) => jsonStringify(item)).join(',');\n return `[${arrayItems}]`;\n } else {\n const objectKeys = Object.keys(value);\n const objectItems = objectKeys.map((key) => {\n const keyValue = jsonStringify(value[key]);\n return keyValue !== undefined ? `\"${key}\":${keyValue}` : undefined;\n }).filter((item) => item !== undefined).join(',');\n return `{${objectItems}}`;\n }\n }\n\n return undefined; // 这里省略了对函数、Symbol、循环引用等类型的处理\n}\n\n// 使用示例\nconst obj = {\n a: \"hello\",\n b: 42,\n c: true,\n d: { e: \"world\", f: [1, 2, 3] },\n};\n\nconsole.log(jsonStringify(obj)); // {\"a\":\"hello\",\"b\":42,\"c\":true,\"d\":{\"e\":\"world\",\"f\":[1,2,3]}}\n```\n\n请注意，这个实现有很多限制，适用于简单场景。它没有处理循环引用、函数、`Symbol` 类型等复杂情况。实际项目中，你还是应该使用内置的 `JSON.stringify` 函数。\n\n### 手写 `JSON.parse`\n\n`JSON.parse` 是一个将 JSON 字符串转换为 JavaScript 对象或值的函数。手写一个简化版的 `JSON.parse` 可能不会涵盖所有的细节和兼容性问题，这里提供一个基于 JavaScript 的 eval 函数实现的简单版本。请注意，在实际项目中应使用原生的 `JSON.parse` 函数以保证安全性和性能。\n\n```javascript\nfunction jsonParse(jsonString) {\n return eval(\"(\" + jsonString + \")\");\n}\n\n// 使用示例\nconst jsonString = '{\"a\": \"hello\", \"b\": 42, \"c\": true, \"d\": {\"e\": \"world\", \"f\": [1, 2, 3]}}';\n\nconsole.log(jsonParse(jsonString));\n/* 输出：\n{\n a: \"hello\",\n b: 42,\n c: true,\n d: { e: \"world\", f: [1, 2, 3] },\n}\n*/\n```\n\n虽然使用 `eval` 函数能简单地实现 JSON 字符串的解析，但在实践过程中使用 `eval` 并不安全，因为它会执行任意字符串中包含的 JavaScript 代码。因此，强烈建议实际项目中使用 `JSON.parse` 和 `JSON.stringify` 函数。\n\n",{"_58":510,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/362/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/362/timeline",{"_58":513,"_60":61,"_62":514,"_64":515,"_66":516,"_68":517,"_70":518,"_72":519,"_74":520,"_76":521,"_78":522,"_111":523,"_131":132,"_133":24,"_134":-5,"_135":526,"_137":527,"_159":152,"_153":529,"_155":530,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":531,"_170":532,"_176":533,"_178":534,"_190":536,"_192":-5,"_193":-5,"_194":144},"https://api.github.com/repos/pro-collection/interview-question/issues/361","https://api.github.com/repos/pro-collection/interview-question/issues/361/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/361/comments","https://api.github.com/repos/pro-collection/interview-question/issues/361/events","https://github.com/pro-collection/interview-question/issues/361",1719661219,"I_kwDOJGDC6c5mf_Kj",361,"函数柯里化了解多少【热度: 529】",{"_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},[524,525],{"_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":234,"_68":235,"_62":236,"_70":237,"_72":238,"_74":239,"_76":240,"_122":241,"_147":528,"_149":243,"_151":152,"_131":132,"_153":244,"_155":245,"_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-22T13:08:59Z","2023-05-22T13:09:00Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：函数柯里化、柯里化应用场景、柯里化优势\n\n### 函数柯里化是什么？ \n\n函数柯里化（Currying）是一种在函数式编程中使用的技术，其主要目的是将一个接受多个参数的函数转换成一系列使用一个参数的函数。\n这样做的好处是允许你创建一些部分应用的函数，预先固定一些参数，使得代码更简洁，便于复用和组合。\n\n以下是一个简单的柯里化函数的例子：\n\n```javascript\nfunction curry(fn) {\n return function curried(...args) {\n if (args.length >= fn.length) {\n return fn.apply(this, args);\n } else {\n return function (...args2) {\n return curried.apply(this, args.concat(args2));\n };\n }\n };\n}\n\n// 使用 curry 函数的例子\nfunction sum(a, b, c) {\n return a + b + c;\n}\n\nconst curriedSum = curry(sum);\n\nconsole.log(curriedSum(1)(2)(3)); // 6\nconsole.log(curriedSum(1, 2)(3)); // 6\nconsole.log(curriedSum(1)(2, 3)); // 6\nconsole.log(curriedSum(1, 2, 3)); // 6\n```\n\n在这个例子中，我们创建了一个 `curry` 函数，该函数接受一个普通的多参数函数（如 `sum`）作为输入，并返回一个新的柯里化函数。这个柯里化函数可以用多种方式调用，其参数可以一次性传递，也可以分批传递。\n\n\n### 柯里化有哪些应用场景和优势\n\n\n函数柯里化在函数式编程中有很多应用场景和优势。以下是一些常见的应用场景和优势：\n\n1. 参数复用：柯里化可以使我们预先固定一些参数，形成一个部分应用的函数，这样可以将相同参数的重复使用降到最低。这有利于减少参数传递的冗余，使代码更简洁。\n\n例：\n```javascript\nfunction multiply(a, b) {\n return a * b;\n}\n\nconst double = curry(multiply)(2);\nconst triple = curry(multiply)(3);\n\nconsole.log(double(5)); // 10\nconsole.log(triple(5)); // 15\n```\n\n2. 延迟计算：柯里化允许我们将函数调用分批进行，而不是一次性传递所有参数。这样，我们可以在需要的时候进行最后的计算，提高性能。\n\n例：\n```javascript\nconst data = [1, 2, 3, 4, 5];\nconst curriedFilter = curry((predicate, arr) => arr.filter(predicate));\n\nconst greaterThanThree = (num) => num > 3;\nconst filterGreaterThanThree = curriedFilter(greaterThanThree);\n\n// 延迟计算：先创建过滤函数，最后传入数据时才执行\nconst result = filterGreaterThanThree(data);\nconsole.log(result); // [4, 5]\n```\n\n3. 代码组合和复用：柯里化有助于创建可以被复用或组合成更复杂形式的函数。这使我们能够构建更加模块化和可扩展的代码库。\n\n例：\n```javascript\nconst curriedMap = curry((fn, arr) => arr.map(fn));\n\nconst doubleAll = curriedMap(double);\nconst tripleAll = curriedMap(triple);\n\nconsole.log(doubleAll([1, 2, 3])); // [2, 4, 6]\nconsole.log(tripleAll([1, 2, 3])); // [3, 6, 9]\n```\n\n4. 更易读的代码：柯里化技术可以让我们的代码更加模块化和函数式，进而提高代码的可读性。柯里化函数更加聚焦于单一职责，这样可以让代码逻辑更清晰。\n\n函数柯里化有助于提高代码的可读性、可维护性和模块化程度，同时减少参数传递的冗余，使代码更简洁。在函数式编程场景中，柯里化是一种非常实用的技术。\n",{"_58":535,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/361/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/361/timeline",{"_58":538,"_60":61,"_62":539,"_64":540,"_66":541,"_68":542,"_70":543,"_72":544,"_74":545,"_76":546,"_78":547,"_111":548,"_131":132,"_133":24,"_134":-5,"_135":550,"_137":551,"_159":152,"_153":553,"_155":554,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":555,"_170":556,"_176":557,"_178":558,"_190":560,"_192":-5,"_193":-5,"_194":144},"https://api.github.com/repos/pro-collection/interview-question/issues/350","https://api.github.com/repos/pro-collection/interview-question/issues/350/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/350/comments","https://api.github.com/repos/pro-collection/interview-question/issues/350/events","https://github.com/pro-collection/interview-question/issues/350",1698692048,"I_kwDOJGDC6c5lP_vQ",350,"如何做 promise 缓存？上一次调用函数的 promise 没有返回，那么下一次调用函数依然返回上一个 promise",{"_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},[549],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":413,"_68":414,"_62":415,"_70":416,"_72":417,"_74":418,"_76":419,"_122":420,"_147":552,"_149":422,"_151":152,"_131":132,"_153":423,"_155":424,"_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-06T16:22:53Z","2023-05-06T16:22:54Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### 基础实现\n\n可以使用闭包实现 promise 缓存的功能。下面是一个示例代码：\n\n```js\nfunction cachedPromise(promiseFunction) {\n let lastPromise = null;\n \n return function() {\n if (lastPromise !== null) {\n return lastPromise;\n }\n \n lastPromise = promiseFunction();\n return lastPromise;\n }\n}\n\nconst promiseFunction = () => {\n // 这里可以是任何一个返回 Promise 的异步函数\n return new Promise(resolve => {\n setTimeout(() => {\n resolve('Resolved!');\n }, 2000)\n })\n}\n\nconst cachedPromiseFunction = cachedPromise(promiseFunction);\n\ncachedPromiseFunction().then(result => {\n console.log(result); // Resolved!\n});\n\n// 因为上次调用函数的 Promise 还未 resolve，所以这里直接返回上次的 Promise\ncachedPromiseFunction().then(result => {\n console.log(result); // Resolved!\n});\n```\n\n在上面的代码中，我们先定义了一个 `cachedPromise` 函数，它接收一个返回 Promise 的异步函数 `promiseFunction`，并返回一个新的函数。这个新函数会维护一个 `lastPromise` 变量，用来记录上一次调用 `promiseFunction` 函数返回的 Promise。\n\n当第一次调用 `cachedPromiseFunction` 时，`lastPromise` 变量还没有值，因此会调用 `promiseFunction`，并将返回的 Promise 赋值给 `lastPromise` 变量。同时，返回这个 Promise。\n\n当第二次调用 `cachedPromiseFunction` 时，由于 `lastPromise` 变量已经被赋值，表示上一次调用 `promiseFunction` 返回的 Promise 还没有返回，因此直接返回 `lastPromise` 变量，而不再调用 `promiseFunction`。\n\n当第一个 Promise 返回时，会将 `lastPromise` 重置为空，这样下一次调用 `cachedPromiseFunction` 就会重新执行 `promiseFunction`。\n\n通过这种方式，我们就实现了 promise 缓存的功能，即如果上一次调用的 Promise 没有返回，那么下一次调用函数依然会返回上一个 Promise。\n\n### 如果上一次的函数调用 promise 已经返回，下一次调用就是一个新的 promise\n\n修改上述的代码，让 `cachedPromise` 函数可以检测上一次的 Promise 是否已经完成，如果已经完成，则返回新的 Promise 对象。\n\n下面是修改后的代码：\n\n```\nfunction cachedPromise(promiseFunction) {\n let lastPromise = null;\n \n return function() {\n if (lastPromise !== null) {\n if (lastPromise.isFulfilled()) { // 如果上一次 Promise 已经完成\n lastPromise = null; // 重置上一次 Promise\n } else {\n return lastPromise; // 直接返回上一次 Promise\n }\n }\n \n lastPromise = promiseFunction();\n return lastPromise;\n }\n}\n\nconst promiseFunction = () => {\n // 这里可以是任何一个返回 Promise 的异步函数\n return new Promise(resolve => {\n setTimeout(() => {\n resolve('Resolved!');\n }, 2000)\n })\n}\n\nconst cachedPromiseFunction = cachedPromise(promiseFunction);\n\ncachedPromiseFunction().then(result => {\n console.log(result); // Resolved!\n});\n\n// 因为上次调用函数的 Promise 还未 resolve，所以这里直接返回上次的 Promise\ncachedPromiseFunction().then(result => {\n console.log(result); // Resolved!\n});\n\nsetTimeout(() => {\n // 上一次 Promise 已经完成，这里会返回新的 Promise 对象\n cachedPromiseFunction().then(result => {\n console.log(result); // Resolved!\n });\n}, 3000);\n```\n\n在这段代码中，我们在闭包函数中判断上一次的 Promise 是否已经完成，如果已经完成，则将其重置为空，在下一次调用时会再次执行 `promiseFunction`，并返回新的 Promise 对象。\n\n请注意，由于 `lastPromise` 变量被修改了，我们使用了一个名为 `isFulfilled()` 的方法来检测 Promise 是否已经完成。这个方法可以使用任何一个符合 Promises/A+ 规范的 Promise 库（如 bluebird.js）来实现。如果你使用的是原生的 Promise 对象，可以使用 `then()` 方法代替 `isFulfilled()`，如下所示：\n\n```\nif (typeof lastPromise.then !== 'function') {\n lastPromise = null; // 重置上一次 Promise\n} else {\n return lastPromise; // 直接返回上一次 Promise\n}\n```\n\n这样，我们就实现了一个可以检测 Promise 完成状态的 promise 缓存函数。\n\n\n",{"_58":559,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/350/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/350/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,"_131":132,"_133":24,"_134":-5,"_135":574,"_137":575,"_159":239,"_153":577,"_155":578,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":579,"_170":580,"_176":581,"_178":582,"_190":584,"_192":-5,"_193":-5,"_194":144},"https://api.github.com/repos/pro-collection/interview-question/issues/347","https://api.github.com/repos/pro-collection/interview-question/issues/347/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/347/comments","https://api.github.com/repos/pro-collection/interview-question/issues/347/events","https://github.com/pro-collection/interview-question/issues/347",1698677762,"I_kwDOJGDC6c5lP8QC",347,"Javascript 数组中有那些方法可以改变自身，那些不可以",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[573],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":576,"_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-06T15:41:01Z","2023-06-02T06:36:31Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"可以改变自身的数组方法：\r\n\r\n- `pop()`: 删除数组最后一项，并返回删除项的值。\r\n- `push():` 向数组末尾添加一个或多个元素，并返回新数组的长度。\r\n- `reverse()`: 反转数组的顺序，返回逆序后的原数组。\r\n- `shift()`: 删除数组第一项，并返回删除项的值。\r\n- `unshift()`: 方法将指定元素添加到数组的开头，并返回数组的新长度。\r\n- `sort()`: 对数组进行排序，返回排序后的原数组。\r\n- `splice()`: 添加或删除数组元素，返回由被删除元素组成的数组。\r\n\r\n不可以改变自身的数组方法:\r\n\r\n- `concat()`: 连接一或多个数组，返回新的合并的数组。\r\n- `filter()`: 对数组筛选符合条件的项，并返回符合条件的项组成的新数组。\r\n- `map()`: 对数组的每一项进行操作，并返回每个操作后的项组成的新数组。\r\n- `slice()`: 返回数组的一部分作为新数组，原数组不会改变。\r\n- `join()`: 将数组的每一项拼接起来作为一个字符串返回，原数组不会改变。\r\n",{"_58":583,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/347/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/347/timeline",{"_58":586,"_60":61,"_62":587,"_64":588,"_66":589,"_68":590,"_70":591,"_72":592,"_74":593,"_76":594,"_78":595,"_111":596,"_131":132,"_133":24,"_134":-5,"_135":598,"_137":599,"_159":152,"_153":601,"_155":601,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":602,"_170":603,"_176":604,"_178":605,"_190":607,"_192":-5,"_193":-5,"_194":144},"https://api.github.com/repos/pro-collection/interview-question/issues/346","https://api.github.com/repos/pro-collection/interview-question/issues/346/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/346/comments","https://api.github.com/repos/pro-collection/interview-question/issues/346/events","https://github.com/pro-collection/interview-question/issues/346",1698663675,"I_kwDOJGDC6c5lP4z7",346,"new Function 了解多少？【热度: 1,042】",{"_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},[597],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":413,"_68":414,"_62":415,"_70":416,"_72":417,"_74":418,"_76":419,"_122":420,"_147":600,"_149":422,"_151":152,"_131":132,"_153":423,"_155":424,"_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-06T14:58:42Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：new Function 概念、js new Function 执行性能、js new Function 使用场景\n\n### 基本概念\n\n`new Function()` 是 JavaScript 中的一个构造函数，它可以实例化一个新的函数对象并返回。该函数对象可以使用传递给 `new Function()` 的字符串参数作为函数体，并使用其他传递给它的参数作为函数参数，从而动态创建一个可执行的函数。\n\n具体来说，`new Function()` 构造函数可以接受多个字符串参数作为函数的参数和函数体，其参数形式如下：\n\n```\nnew Function ([arg1[, arg2[, ...argn]],] functionBody)\n```\n\n其中，`arg1, arg2, ..., argn` 为函数的参数列表，`functionBody` 为函数体的字符串表示。当调用 `new Function()` 函数时，JavaScript 引擎会将 `arg1, arg2, ..., argn` 所表示的参数和 `functionBody` 所表示的函数体组合成一个新的函数对象，并将该对象返回。\n\n**举例**\n\n下面是一个简单的 `new Function()` 的使用示例，它使用 `new Function()` 构造函数动态创建一个函数对象，并将该对象作为变量 `add` 的值进行赋值：\n\n```\nconst add = new Function('a', 'b', 'return a + b;');\nconsole.log(add(2, 3)); // 5\n```\n\n上述代码中，`new Function('a', 'b', 'return a + b;')` 创建了一个新的函数对象，其中 `'a'` 和 `'b'` 是函数的参数列表，`'return a + b;'` 是函数的实现代码。然后，该函数对象被赋值给变量 `add`。最后，调用 `add(2, 3)` 执行该函数，返回 `5`。\n\n需要注意的是，`new Function()` 构造函数不能访问其上下文中的变量和函数，因此在使用时需要特别注意作用域的限制。同时，由于 `new Function()` 构造函数的执行权限较为灵活，因此在使用时需要仔细检查并确保其输入参数的合法性和安全性。\n\n\n### new Function 和 eval 的区别\n\n虽然 `new Function()` 和 `eval()` 都可以执行字符串形式的 JavaScript 代码，但是它们在执行方式、使用场景和安全性方面还是有很大的区别的。\n\n下面是 `new Function()` 和 `eval()` 的主要区别：\n\n1. 执行方式不同：`new Function()` 构造函数创建的函数对象只会在其被调用时才会执行，而 `eval()` 函数则立即执行其参数中的 JavaScript 代码，并返回其中的值（如果有）。\n\n2. 作用域不同：`new Function()` 构造函数创建的函数对象没有访问父作用域的能力，只能访问自己的局部变量和全局变量；而 `eval()` 函数则可以访问其自身函数作用域和父作用域的变量和函数，因此具有更高的灵活性和不可预知性。\n\n3. 安全性不同：由于 `new Function()` 构造函数定义的函数对象是在严格的函数作用域下运行的，因此其代码不会改变或访问父作用域中的变量。因此，使用 `new Function()` 构造函数创建函数对象时，可以更好地保证其安全性。而 `eval()` 函数则无法保证代码的安全性，因为它可以访问并改变父作用域中的变量，从而具有更高的攻击风险。\n\n### new Function 性能\n\n与 `eval()` 相比，`new Function()` 函数具有更好的性能。这是因为 `new Function()` 函数在编译时会创建一个新的函数对象，不会像 `eval()` 函数一样将代码注入到当前作用域中。相反，它只在需要时才编译并执行代码，因此在常规情况下，`new Function()` 的性能比 `eval()` 更好。\n\n另外，由于 `new Function()` 在全局作用域外部定义新的函数，可以更好地掌控执行环境，因此我们可以利用 `new Function()` 函数的局部性，使其不仅取代 `eval()`，而且在一定程度上比自执行函数和即时函数表达式引入更少的全局变量。\n\n不过需要注意的是，如果在一个循环中频繁地使用 `new Function()`，或者在函数体内创建过多的嵌套函数，可能会导致性能下降。因此，当需要使用 `new Function()` 函数时，应该尽量减少不必要的重复调用，并注意代码的优化和缓存。\n\n\n### new Function 使用场景\n\n`new Function()` 的使用场景主要是动态生成 Javascript 代码的情况。由于它可以使用字符串形式作为函数体，并接受可变数量的参数，因此很适合在需要动态生成 JavaScript 代码的场景中使用。下面列举一些常见的使用场景：\n\n1. 动态生成函数：使用 `new Function()` 可以动态生成函数，有时候这种方式比使用函数表达式更加灵活。\n\n2. 模板引擎：某些模板引擎使用 `new Function()` 动态生成 JavaScript 代码来进行文本渲染和数据绑定。\n\n3. 解析 JSON：从服务端获取 JSON 数据时，可以使用 `new Function()` 将其转换为具有更好可读性的 JavaScript 对象。\n举例：\n```js\nconst json = '{\"name\": \"张三\", \"age\": \"18\", \"gender\": \"男\"}';\nconst parseJson = new Function(`return ${json}`);\n\nconsole.log(parseJson()); // 输出：{name: \"张三\", age: \"18\", gender: \"男\"}\n```\n\n4. 在浏览器中查找或执行某些 DOM 元素：可以将 JavaScript 代码传递给 `new Function()` 进行动态执行和查找。\n\n需要注意的是，由于 `new Function()` 可以动态生成和执行任意 JavaScript 代码，因此其安全性和风险需要仔细考虑和评估。在使用 `new Function()` 时，应该避免用于可疑的或不可信任的代码执行，并严格控制传递给函数构造函数的参数，以避免潜在的安全漏洞。\n",{"_58":606,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/346/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/346/timeline",{"_58":609,"_60":61,"_62":610,"_64":611,"_66":612,"_68":613,"_70":614,"_72":615,"_74":616,"_76":617,"_78":618,"_111":619,"_131":132,"_133":24,"_134":-5,"_135":621,"_137":622,"_159":152,"_153":624,"_155":625,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":626,"_170":627,"_176":628,"_178":629,"_190":631,"_192":-5,"_193":-5,"_194":144},"https://api.github.com/repos/pro-collection/interview-question/issues/345","https://api.github.com/repos/pro-collection/interview-question/issues/345/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/345/comments","https://api.github.com/repos/pro-collection/interview-question/issues/345/events","https://github.com/pro-collection/interview-question/issues/345",1698653333,"I_kwDOJGDC6c5lP2SV",345,"eval 了解多少？【热度: 538】",{"_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},[620],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":234,"_68":235,"_62":236,"_70":237,"_72":238,"_74":239,"_76":240,"_122":241,"_147":623,"_149":243,"_151":152,"_131":132,"_153":244,"_155":245,"_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-06T14:29:24Z","2023-05-06T14:29:25Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：eval 使用场景、eval 性能、eval 优点、eval 缺点\n\n### 什么是 eval\n\n`eval()` 是 JavaScript 的一个全局函数，用于解析并执行字符串代码。\n\n它接受一个字符串参数，该字符串包含 JavaScript 表达式或语句。在 `eval` 函数执行期间，该字符串的内容将被视为有效 JavaScript 代码，并运行当前作用域中的变量和函数。`eval()` 函数返回执行结果的值。\n\n举个例子：\n\n```js\nlet x = 1;\nlet y = 2;\nconst result = eval(\"x + y\"); // 将字符串作为代码执行\nconsole.log(result); // 输出 3\n```\n\n`eval()` 常被认为是一个危险的函数，原因是它可以执行任何字符串。如果 `eval()` 执行了用户输入的文本，攻击者可能会注入恶意代码，从而窃取敏感信息或操纵应用程序。因此，最好不要在程序中使用 `eval()` 函数，除非你非常明确及了解其潜在风险。\n\n除了 `eval()`，JavaScript 还提供了其他如 `Function()` 构造函数或 `setTimeout()` 等能够执行字符代码的方法，但它们的使用都需要非常小心。\n\n\n### eval 的性能为何比静态编写和编译的代码要慢\n\n`eval()` 函数解析并执行动态的字符串代码，因此在运行时需要进行代码分析和编译。每次调用 `eval()` 都需要重复执行这些操作，这对性能的影响非常大。同时，由于 `eval()` 执行的代码是字符串形式并不是预编译的机器代码，在执行时可能需要使用更多的内存和 CPU 资源。\n\n相比之下，静态编写的代码在编译时已经被转化为机器代码，因此执行速度会更快。编译器可以进行多项优化，例如移除无用的代码，减少内存分配等。这些优化在运行时是不可能完成的，因此 `eval()` 函数的性能相对较低。\n\n### eval 性能一定就很差吗\n\n不是所有情况下 `eval()` 函数的性能都很差。在某些情况下，`eval()` 的性能可能与静态编写的代码相当。例如，如果动态代码比较简单，并且在程序运行期间只会执行一次，那么使用 `eval()` 不会造成显著的性能损失。但是如果动态代码比较复杂，并且需要经常执行，那么使用 `eval()` 的性能就会显著低于静态编写的代码。\n\n另外，`eval()` 的性能问题还取决于运行时环境的不同。在某些浏览器中，使用 `eval()` 时会导致缓慢的 JavaScript 执行，而在其他浏览器中则表现良好。因此，在编写代码时，应该始终将性能作为一个重要的因素进行考虑，并根据实际情况来选择使用 `eval()` 或其他适当的解决方案。\n\n\n### eval 有什么优势\n\n`eval()` 函数有以下几个优势：\n\n1. 动态执行代码：`eval()` 函数可以动态地将字符串解析为 JavaScript 代码并执行，从而可以在运行时动态生成代码并执行。这种动态性使得 `eval()` 函数在一些特定的编程场景中非常有用，例如动态计算表达式、动态生成函数等。\n\n2. 灵活性高：由于 `eval()` 函数可以动态解析字符串并执行其中的 JavaScript 代码，因此可以根据需要在运行时动态生成代码，而不必在编写代码时预先定义。这种灵活性使得 `eval()` 函数在一些需要动态生成代码的场景中非常有用。\n\n3. 命名空间：由于 `eval()` 函数会执行其中的 JavaScript 代码，因此代码可以利用当前作用域中的变量和函数，从而可以有效地利用命名空间并提高代码的复用性。\n\n**缺点**\n\n虽然 `eval()` 函数具有上述优势，但它也存在潜在的安全隐患，因此应当避免在应用程序中过度使用 `eval()` 函数，并在使用时注重安全性和可控性。\n",{"_58":630,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/345/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/345/timeline",{"_58":633,"_60":61,"_62":634,"_64":635,"_66":636,"_68":637,"_70":638,"_72":639,"_74":640,"_76":641,"_78":642,"_111":643,"_131":132,"_133":24,"_134":-5,"_135":645,"_137":646,"_159":152,"_153":648,"_155":649,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":650,"_170":651,"_176":652,"_178":653,"_190":655,"_192":-5,"_193":-5,"_194":144},"https://api.github.com/repos/pro-collection/interview-question/issues/340","https://api.github.com/repos/pro-collection/interview-question/issues/340/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/340/comments","https://api.github.com/repos/pro-collection/interview-question/issues/340/events","https://github.com/pro-collection/interview-question/issues/340",1697858817,"I_kwDOJGDC6c5lM0UB",340,"值类型和引用类型的区别?【热度: 1,625】",{"_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},[644],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":647,"_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-05T16:07:18Z","2023-05-05T16:07:19Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：值类型和引用类型区别\n\n在JavaScript中，值类型和引用类型是两种不同的数据类型，它们之间的区别在于数据存储和传递的方式不同。\n\n值类型（也称为“原始类型”）包括 undefined、null、boolean、number和string。这些数据类型的值是可以直接存储在变量中的，这意味着如果我们将一个值类型的变量赋给另一个变量时，实际上是将值复制到新变量的内存空间中。在JavaScript中，值类型的变量是直接存储在栈中的。因此，值类型的变量永远不会出现“引用计数”错误，因为每个变量都可以被简单地复制和赋值。\n\n引用类型包括对象、数组和函数等复杂数据类型。和值类型不同，引用类型的值是存储在堆中的，栈中存储的是变量的引用地址。当我们把一个引用类型的变量赋给另一个变量时，实际上是将变量的引用地址复制到了新变量的内存空间中。这意味着这两个变量引用同一个对象。如果我们修改一个变量，那么另一个变量也会被修改；因为它们引用同一个对象。如果我们在堆中创建多个对象，则会有多个变量引用它们。这一点需要非常小心，因为它可以导致一些问题，如“引用计数”错误。\n\n总之，JavaScript中的值类型和引用类型之间的区别在于它们如何存储和传递。理解这两种不同的数据类型的工作原理，可以帮助我们更好地理解JavaScript的内部工作原理，从而更好地编写代码。\n\n**举例说明**\n\n下面是一个简单的例子，来说明值类型和引用类型在操作时的区别：\n\n```js\n// 值类型\nvar x = 1;\nvar y = x;\nx = 2;\nconsole.log(x); // 输出2 \nconsole.log(y); // 输出1\n\n// 引用类型\nvar a = {name: 'Tom', age: 20};\nvar b = a;\na.age = 30;\nconsole.log(a.age); // 输出30 \nconsole.log(b.age); // 输出30，原因是 a 和 b 指向同一个对象\n```\n\n在这个例子中，我们首先创建一个值类型变量 x，并将其值设置为 1。接着我们将 x 的值赋给 y 变量。然后我们将 x 的值修改为 2，这不会影响变量 y，因为 x 和 y 之间的赋值使用的是值复制。这是值类型的典型特性。\n\n接下来，我们创建了一个包含 name 和 age 属性的对象 a，并将其赋给变量 b。然后我们修改了 a 的 age 属性的值。此时，由于 a 和 b 引用同一个对象，因此 b.age 的值也随之改变，这才是引用类型的典型特性。\n\n在代码中我们看到，值类型的变量在赋值时是通过复制整个值本身的副本，在内存中分配了新的空间来存储。而引用类型的变量赋值时是将指针复制到新变量中，用来指向堆（heap）中存储对象的内存空间。\n\n",{"_58":654,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/340/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/340/timeline",{"_58":657,"_60":61,"_62":658,"_64":659,"_66":660,"_68":661,"_70":662,"_72":663,"_74":664,"_76":665,"_78":666,"_111":667,"_131":132,"_133":24,"_134":-5,"_135":669,"_137":670,"_159":152,"_153":672,"_155":673,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":674,"_170":675,"_176":676,"_178":677,"_190":679,"_192":-5,"_193":-5,"_194":144},"https://api.github.com/repos/pro-collection/interview-question/issues/339","https://api.github.com/repos/pro-collection/interview-question/issues/339/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/339/comments","https://api.github.com/repos/pro-collection/interview-question/issues/339/events","https://github.com/pro-collection/interview-question/issues/339",1697853257,"I_kwDOJGDC6c5lMy9J",339,"JavaScript 中的变量在内存中的具体存储形式是什么【热度: 183】",{"_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},[668],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":413,"_68":414,"_62":415,"_70":416,"_72":417,"_74":418,"_76":419,"_122":420,"_147":671,"_149":422,"_151":152,"_131":132,"_153":423,"_155":424,"_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-05T16:03:04Z","2023-05-05T16:03:05Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：JavaScript 变量存储形式\n\n在JavaScript中，变量的存储方式是基于所存储值的数据类型。JavaScript有7种内置数据类型：undefined、null、boolean、number、string、symbol和object。\n\n对于基础数据类型（除了object），变量值会直接存储在内存中。具体来说，这些数据类型的变量在内存中的存储形式如下：\n\n- undefined和null：这两个数据类型都只有一个值，每个值有一个特殊的内存地址。存储它们的变量会被赋予对应的内存地址。\n- boolean：这个数据类型的值只需要存储一个比特位（0或1），它们通常被存储在栈中，而不是堆中。\n- number：根据规范，数字类型在内存中占用8个字节的空间（64位），它们通常被存储在栈中，而不是堆中。\n- string：字符串实际上是一组字符数组，它们通常被存储在堆中，并通过引用地址存储在栈中。\n- symbol：每个symbol对应于唯一的标识符。它们通常被存储在堆中，并通过引用地址存储在栈中。\n\n而对于对象类型（包括对象、数组等），变量存储了一个指向存储对象的内存地址的指针。JavaScript采用引用计数内存管理，因此它会对每个对象进行引用计数，当一个对象不再被引用时，JavaScript会自动回收这个对象的内存空间。\n\n总的来说，在JavaScript中，变量的存储方式基于值类型的数据类型，对于对象型变量，存储指向对象的内存地址的指针以及对象的值，而对于基础类型的变量，直接存储变量的值。\n",{"_58":678,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/339/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/339/timeline",{"_58":681,"_60":61,"_62":682,"_64":683,"_66":684,"_68":685,"_70":686,"_72":687,"_74":688,"_76":689,"_78":690,"_111":691,"_131":132,"_133":24,"_134":-5,"_135":693,"_137":694,"_159":152,"_153":696,"_155":696,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":697,"_170":698,"_176":699,"_178":700,"_190":702,"_192":-5,"_193":-5,"_194":144},"https://api.github.com/repos/pro-collection/interview-question/issues/338","https://api.github.com/repos/pro-collection/interview-question/issues/338/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/338/comments","https://api.github.com/repos/pro-collection/interview-question/issues/338/events","https://github.com/pro-collection/interview-question/issues/338",1697847965,"I_kwDOJGDC6c5lMxqd",338,"JavaScript 对象的底层数据结构是什么【热度: 517】",{"_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},[692],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":413,"_68":414,"_62":415,"_70":416,"_72":417,"_74":418,"_76":419,"_122":420,"_147":695,"_149":422,"_151":152,"_131":132,"_153":423,"_155":424,"_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-05T15:59:29Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：JavaScript 对象数据结构\n\n在JavaScript中，对象是一种无序的键值对集合，可以保存和传递信息。对象是一种非常重要的数据类型，在JavaScript中，几乎所有东西都是对象。\n\n在底层，JavaScript对象的数据结构是哈希表（Hash Table），也可以称为散列表。哈希表是一种使用哈希函数将键值映射到数据中的位置的数据结构。它允许效率高且快速地插入、查找和删除数据，这些操作在算法的平均情况下都需要常数时间。哈希表的主要思想是将键值对转换为索引的方式在常数时间内获取值，因此哈希表非常适合用于大量的键值对数据存储。\n\n在JavaScript中，对象的键值对存储使用了类似哈希表的技术。JavaScript引擎使用一个称为哈希表种子的随机数字来计算键的哈希值，然后使用头插法（链表或树）将键和值存储在桶中，以实现高效的插入和查询操作。因此，JavaScript对象在实现上使用了哈希表来存储和访问键值对，从而提供了非常高效的数据存储和查找操作，使之成为了编写JavaScript代码的强大工具。\n",{"_58":701,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/338/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/338/timeline",{"_58":704,"_60":61,"_62":705,"_64":706,"_66":707,"_68":708,"_70":709,"_72":710,"_74":711,"_76":712,"_78":713,"_111":714,"_131":132,"_133":24,"_134":-5,"_135":717,"_137":718,"_159":152,"_153":720,"_155":721,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":722,"_170":723,"_176":724,"_178":725,"_190":727,"_192":-5,"_193":-5,"_194":144},"https://api.github.com/repos/pro-collection/interview-question/issues/303","https://api.github.com/repos/pro-collection/interview-question/issues/303/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/303/comments","https://api.github.com/repos/pro-collection/interview-question/issues/303/events","https://github.com/pro-collection/interview-question/issues/303",1680039533,"I_kwDOJGDC6c5kI15t",303,"dom 渲染能使用 GPU 加速吗？【热度: 494】",{"_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},[715,716],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":268,"_72":269,"_58":270,"_117":271,"_119":129,"_121":24,"_122":130},[],{"_58":234,"_68":235,"_62":236,"_70":237,"_72":238,"_74":239,"_76":240,"_122":241,"_147":719,"_149":243,"_151":152,"_131":132,"_153":244,"_155":245,"_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-04-23T14:05:01Z","2023-04-23T14:16:47Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"只有部分情况可以使用 GPU 加速渲染。浏览器将 DOM 元素转换为图层（Layer），然后将图层绘制到屏幕上。在某些情况下，这些图层可以使用 GPU 加速，从而提高渲染性能。\n\n浏览器将具有以下属性之一的元素视为单独的图层：\n\n- 使用 CSS 3D 变换或透视属性的元素\n- 使用 CSS 滤镜的元素\n- 使用 will-change 属性显式指定的元素\n- 使用