\n \n

\n ```\n\n - 这里创建了一个宽度和高度都为 500px 的 SVG 容器，并将其放置在一个`id`为`container`的`div`元素内部。\n\n - **步骤二：创建连线元素并设置初始位置（使用 JavaScript）**\n\n - 假设已经有两个可拖拽的 DOM 元素，它们的`id`分别为`element1`和`element2`。在 JavaScript 中，可以通过以下方式创建连线并设置初始位置：\n\n ```javascript\n const svgContainer = document.getElementById(\"svg-container\");\n const element1 = document.getElementById(\"element1\");\n const element2 = document.getElementById(\"element2\");\n // 创建SVG连线元素\n const line = document.createElementNS(\"http://www.w3.org/2000/svg\", \"line\");\n line.setAttribute(\"x1\", element1.offsetLeft + element1.offsetWidth / 2);\n line.setAttribute(\"y1\", element1.offsetTop + element1.offsetHeight / 2);\n line.setAttribute(\"x2\", element2.offsetLeft + element2.offsetWidth / 2);\n line.setAttribute(\"y2\", element2.offsetTop + element2.offsetHeight / 2);\n line.setAttribute(\"stroke\", \"black\");\n line.setAttribute(\"stroke - width\", \"2\");\n // 将连线元素添加到SVG容器中\n svgContainer.appendChild(line);\n ```\n\n - 这段代码首先获取了 SVG 容器和两个可拖拽元素。然后使用`createElementNS`方法创建了一个 SVG 的``元素，这个方法是用于创建 SVG 元素的正确方式，因为 SVG 元素是在一个特定的命名空间下。接着，通过`setAttribute`方法设置了连线的起点（`x1`、`y1`）和终点（`x2`、`y2`）坐标，这里的坐标是根据元素的偏移位置（`offsetLeft`和`offsetTop`）以及元素宽度和高度的一半来计算的，这样连线就会连接到元素的中心位置。最后，设置了连线的颜色（`stroke`）和宽度（`stroke - width`），并将连线元素添加到 SVG 容器中。\n\n - **步骤三：更新连线位置（在元素拖拽事件中）**\n - 为了在元素拖拽时更新连线的位置，需要在拖拽事件处理函数中添加代码来更新连线的起点和终点坐标。假设使用了 HTML5 的`drag`事件来实现元素的拖拽，以下是一个简单的示例：\n ```javascript\n element1.addEventListener(\"drag\", (event) => {\n line.setAttribute(\"x1\", event.target.offsetLeft + event.target.offsetWidth / 2);\n line.setAttribute(\"y1\", event.target.offsetTop + event.target.offsetHeight / 2);\n });\n element2.addEventListener(\"drag\", (event) => {\n line.setAttribute(\"x2\", event.target.offsetLeft + event.target.offsetWidth / 2);\n line.setAttribute(\"y2\", event.target.offsetTop + event.target.offsetHeight / 2);\n });\n ```\n - 在这里，分别为两个可拖拽元素添加了`drag`事件监听器。当元素被拖拽时，会获取元素的新位置，并更新连线的起点（对于`element1`）或终点（对于`element2`）坐标，从而实现连线随着元素位置变化而动态更新的效果。\n\n3. **使用 Canvas 实现连接线（替代方案）**\n\n - **步骤一：创建 Canvas 元素并获取绘图上下文**\n\n - 在 HTML 文件中创建一个 Canvas 元素：\n\n ```html\n

\n ```\n\n - 然后在 JavaScript 中获取 Canvas 元素和它的绘图上下文（`2d`上下文用于绘制二维图形）：\n\n ```javascript\n const canvasContainer = document.getElementById(\"canvas-container\");\n const ctx = canvasContainer.getContext(\"2d\");\n ```\n\n - **步骤二：绘制初始连线（根据元素位置）**\n\n - 同样假设已经有两个可拖拽的 DOM 元素，`id`为`element1`和`element2`。在 JavaScript 中计算连线的起点和终点坐标并绘制连线：\n\n ```javascript\n const element1 = document.getElementById(\"element1\");\n const element2 = document.getElementById(\"element2\");\n function drawLine() {\n const x1 = element1.offsetLeft + element1.offsetWidth / 2;\n const y1 = element1.offsetTop + element1.offsetHeight / 2;\n const x2 = element2.offsetLeft + element2.offsetWidth / 2;\n const y2 = element2.offsetTop + element2.offsetHeight / 2;\n ctx.beginPath();\n ctx.moveTo(x1, y1);\n ctx.lineTo(x2, y2);\n ctx.strokeStyle = \"black\";\n ctx.lineWidth = 2;\n ctx.stroke();\n }\n drawLine();\n ```\n\n - 这段代码定义了一个`drawLine`函数，在函数内部计算了连线的起点和终点坐标，然后使用 Canvas 的绘图 API（`beginPath`、`moveTo`、`lineTo`和`stroke`）来绘制连线，设置了连线的颜色（`strokeStyle`）和宽度（`lineWidth`）。\n\n - **步骤三：更新连线（在元素拖拽事件中）**\n - 在元素拖拽事件处理函数中，需要清除之前绘制的连线（因为 Canvas 是基于像素的绘制，每次重新绘制都需要清除之前的内容），然后重新绘制连线：\n ```javascript\n element1.addEventListener(\"drag\", (event) => {\n ctx.clearRect(0, 0, canvasContainer.width, canvasContainer.height);\n drawLine();\n });\n element2.addEventListener(\"drag\", (event) => {\n ctx.clearRect(0, 0, canvasContainer.width, canvasContainer.height);\n drawLine();\n });\n ```\n - 这里为两个可拖拽元素添加了`drag`事件监听器。当元素被拖拽时，首先使用`clearRect`方法清除整个 Canvas 画布，然后调用`drawLine`函数重新绘制连线，以实现连线随着元素位置变化而更新的效果。\n","reactions",{"_54":170,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/1083/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/1083/timeline","performed_via_github_app","state_reason","score",1,{"_54":187,"_56":57,"_58":188,"_60":189,"_62":190,"_64":191,"_66":192,"_68":193,"_70":194,"_72":195,"_74":196,"_107":197,"_127":128,"_129":26,"_130":-5,"_131":199,"_133":200,"_155":213,"_149":214,"_151":215,"_154":-5,"_158":159,"_160":216,"_165":-5,"_166":217,"_168":218,"_180":220,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/1079","https://api.github.com/repos/pro-collection/interview-question/issues/1079/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1079/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1079/events","https://github.com/pro-collection/interview-question/issues/1079",2740556506,"I_kwDOJGDC6c6jWZLa",1079,"实现一个加法函数sum，支持sum(1)(2)(3,4)(5,6,7....)【热度: 116】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[198],{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":209,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-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,"中","中级程序面试问题",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},491,"2023-03-06T15:00:15Z","2025-02-10T16:32:39Z",4,"2024-12-15T11:15:36Z","2025-02-22T02:55:03Z",{"_162":148,"_163":148,"_164":148},"**关键词**：sum 函数实现\n\n举例：\n\n```js\nconsole.log(sum(1,2,3)(4)) => 输出 10\n```\n\n以下是使用 JavaScript 实现满足要求的`sum`函数的代码：\n\n```javascript\nfunction sum(...args) {\n let total = 0;\n for (let arg of args) {\n if (Array.isArray(arg)) {\n for (let num of arg) {\n total += num;\n }\n } else {\n total += arg;\n }\n }\n\n function innerSum(...innerArgs) {\n for (let innerArg of innerArgs) {\n if (Array.isArray(innerArg)) {\n for (let num of innerArg) {\n total += num;\n }\n } else {\n total += innerArg;\n }\n }\n return innerSum;\n }\n\n innerSum.toString = function () {\n return total;\n };\n\n return innerSum;\n}\n```\n\n在上述代码中：\n\n1. 首先定义了外部的`sum`函数，它接受任意数量的参数（可以是单个数字或数字数组），并将这些参数的值累加到`total`变量中。\n2. 然后在`sum`函数内部定义了一个名为`innerSum`的内部函数，它同样接受任意数量的参数，并将这些参数的值累加到`total`变量中。每次调用`innerSum`都会继续累加新传入的参数值。\n3. 最后，为`innerSum`函数添加了一个`toString`方法，当在`console.log`等需要将函数转换为字符串的场景下，会返回累加得到的`total`值，这样就能得到正确的输出结果。\n\n例如：\n\n```javascript\nconsole.log(sum(1, 2, 3)(4));\n// 输出 10\n\nconsole.log(sum(1)(2)(3, 4)(5, 6, 7));\n// 输出 28\n```\n",{"_54":219,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/1079/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1079/timeline",{"_54":222,"_56":57,"_58":223,"_60":224,"_62":225,"_64":226,"_66":227,"_68":228,"_70":229,"_72":230,"_74":231,"_107":232,"_127":128,"_129":26,"_130":-5,"_131":234,"_133":235,"_155":148,"_149":247,"_151":248,"_154":-5,"_158":159,"_160":249,"_165":-5,"_166":250,"_168":251,"_180":253,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/1053","https://api.github.com/repos/pro-collection/interview-question/issues/1053/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1053/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1053/events","https://github.com/pro-collection/interview-question/issues/1053",2638508271,"I_kwDOJGDC6c6dRHDv",1053,"实现一个处理长字符串的函数【热度: 200】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[233],{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":185,"_72":241,"_118":242,"_143":243,"_145":244,"_147":148,"_127":128,"_149":245,"_151":246,"_153":-5,"_154":-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","初","初级面试问题",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},79,"2023-03-06T14:59:51Z","2024-11-22T14:22:55Z","2024-11-06T15:53:43Z","2024-11-06T15:53:44Z",{"_162":148,"_163":148,"_164":148},"> 描述\n>\n> 实现一个处理字符串的函数: 字符串长度不能超过 256，如果超过 256，字符串中间字符【...】处理，且处理结果字符串长度还是为 256\n\n以下是使用 JavaScript 实现的函数：\n\n```javascript\nfunction processString(str) {\n if (str.length <= 256) {\n return str;\n }\n const halfLength = Math.floor((256 - 3) / 2);\n return str.slice(0, halfLength) + \"... \" + str.slice(str.length - halfLength);\n}\n```\n\n这个函数首先检查输入字符串的长度是否超过 256。如果不超过，则直接返回原字符串。如果超过，它会计算出前后两端保留的字符长度，使得加上中间的“... ”后总长度为 256。然后，它从字符串的开头和结尾分别截取相应长度的子字符串，并将它们与“... ”拼接起来返回。\n",{"_54":252,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/1053/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1053/timeline",{"_54":255,"_56":57,"_58":256,"_60":257,"_62":258,"_64":259,"_66":260,"_68":261,"_70":262,"_72":263,"_74":264,"_107":265,"_127":128,"_129":26,"_130":-5,"_131":267,"_133":268,"_155":148,"_149":270,"_151":271,"_154":-5,"_158":159,"_160":272,"_165":-5,"_166":273,"_168":274,"_180":276,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/1040","https://api.github.com/repos/pro-collection/interview-question/issues/1040/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1040/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1040/events","https://github.com/pro-collection/interview-question/issues/1040",2622506973,"I_kwDOJGDC6c6cUEfd",1040,"创建一个禁止修改的对象，只能通过指定方法去修改属性【热度: 410】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[266],{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":269,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-10-29T23:17:59Z","2024-10-29T23:52:46Z",{"_162":148,"_163":148,"_164":148},"具体描述如下\r\n\r\n```js\r\n// 实现 createObject 函数，用例如下；\r\n\r\n// 比如：\r\nconst obj = createObject({ name: \"name\" });\r\n\r\nobj.name = \"name2\"; // 错误，禁止修改；\r\nobj.set(\"name\", \"name2\"); // 正确方式，允许修改；\r\nobj.set(\"address.info\", \"chongqing\"); // 正确方式，允许添加属性。\r\n```\r\n\r\n**实现**\r\n\r\n以下是使用 JavaScript 实现的`createObject`函数：\r\n\r\n```javascript\r\nfunction createObject(initialData) {\r\n const data = initialData;\r\n return new Proxy(data, {\r\n set(target, property, value, receiver) {\r\n if (property === 'set') {\r\n const keys = property.split('.');\r\n let obj = target;\r\n for (let i = 0; i < keys.length - 1; i++) {\r\n obj = obj[keys[i]] || (obj[keys[i]] = {});\r\n }\r\n obj[keys[keys.length - 1]] = value;\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n },\r\n get(target, property, receiver) {\r\n if (property === 'set') {\r\n return function (key, value) {\r\n const keys = key.split('.');\r\n let obj = target;\r\n for (let i = 0; i < keys.length - 1; i++) {\r\n obj = obj[keys[i]] || (obj[keys[i]] = {});\r\n }\r\n obj[keys[keys.length - 1]] = value;\r\n };\r\n } else {\r\n return target[property];\r\n }\r\n },\r\n });\r\n}\r\n```\r\n\r\n你可以使用以下方式测试这个函数：\r\n\r\n```javascript\r\nconst obj = createObject({ name: 'name' });\r\n\r\nobj.name = 'name2'; // 不会生效，禁止直接修改属性\r\nconsole.log(obj.name); // 'name'\r\n\r\nobj.set('name', 'name2');\r\nconsole.log(obj.name); // 'name2'\r\n\r\nobj.set('address.info', 'chongqing');\r\nconsole.log(obj.address.info); // 'chongqing'\r\n```\r\n",{"_54":275,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/1040/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1040/timeline",{"_54":278,"_56":57,"_58":279,"_60":280,"_62":281,"_64":282,"_66":283,"_68":284,"_70":285,"_72":286,"_74":287,"_107":288,"_127":128,"_129":26,"_130":-5,"_131":290,"_133":291,"_155":148,"_149":293,"_151":293,"_154":-5,"_158":159,"_160":294,"_165":-5,"_166":295,"_168":296,"_180":298,"_182":-5,"_183":-5,"_184":185},"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】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[289],{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":292,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-10-18T15:14:02Z",{"_162":148,"_163":148,"_164":148},"**关键词**：数组随机打乱\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",{"_54":297,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/1014/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1014/timeline",{"_54":300,"_56":57,"_58":301,"_60":302,"_62":303,"_64":304,"_66":305,"_68":306,"_70":307,"_72":308,"_74":309,"_107":310,"_127":128,"_129":26,"_130":-5,"_131":312,"_133":313,"_155":185,"_149":315,"_151":316,"_154":-5,"_158":159,"_160":317,"_165":-5,"_166":318,"_168":319,"_180":321,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/1007","https://api.github.com/repos/pro-collection/interview-question/issues/1007/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1007/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1007/events","https://github.com/pro-collection/interview-question/issues/1007",2597622372,"I_kwDOJGDC6c6a1JJk",1007,"JS 如何翻转一个数组【热度: 327】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[311],{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":314,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-10-18T14:07:09Z","2025-02-26T11:53:54Z",{"_162":148,"_163":148,"_164":148},"**关键词**：翻转数组\n\n在 JavaScript 中，可以通过以下几种方法来翻转一个数组：\n\n**一、使用循环和数组拼接**\n\n1. 原理：\n\n - 通过从数组的末尾开始遍历每个元素，并将其依次添加到一个新的数组中，实现数组的翻转。\n - 首先确定数组的长度，然后从最后一个元素开始，逐个将元素添加到新数组中。\n\n2. 代码示例：\n\n```javascript\nfunction reverseArray(arr) {\n const reversedArr = [];\n for (let i = arr.length - 1; i >= 0; i--) {\n reversedArr.push(arr[i]);\n }\n return reversedArr;\n}\n\nconst originalArray = [1, 2, 3, 4, 5];\nconst reversedArray = reverseArray(originalArray);\nconsole.log(reversedArray); // [5, 4, 3, 2, 1]\n```\n\n**二、使用数组的`reverse`方法**\n\n1. 原理：\n\n - JavaScript 的数组对象提供了一个`reverse`方法，可以直接原地翻转数组，即修改原始数组。\n - 这个方法会改变原始数组的顺序，将第一个元素变为最后一个，第二个元素变为倒数第二个，以此类推。\n\n2. 代码示例：\n\n```javascript\nconst originalArray = [1, 2, 3, 4, 5];\nconst reversedArray = originalArray.reverse();\nconsole.log(reversedArray); // [5, 4, 3, 2, 1]\n```\n\n**三、使用扩展运算符和`reverse`方法（不修改原始数组）**\n\n1. 原理：\n\n - 首先使用扩展运算符（`...`）将原始数组展开为一个新的数组，然后对这个新数组调用`reverse`方法，这样可以在不修改原始数组的情况下得到一个翻转后的数组。\n\n2. 代码示例：\n\n```javascript\nconst originalArray = [1, 2, 3, 4, 5];\nconst reversedArray = [...originalArray].reverse();\nconsole.log(reversedArray); // [5, 4, 3, 2, 1]\nconsole.log(originalArray); // [1, 2, 3, 4, 5]（原始数组未被修改）\n```\n\n这些方法可以根据具体的需求选择使用，如果你希望修改原始数组，可以直接使用`reverse`方法；如果你希望保留原始数组并得到一个翻转后的新数组，可以使用循环或者扩展运算符结合`reverse`方法。\n",{"_54":320,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/1007/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1007/timeline",{"_54":323,"_56":57,"_58":324,"_60":325,"_62":326,"_64":327,"_66":328,"_68":329,"_70":330,"_72":331,"_74":332,"_107":333,"_127":128,"_129":26,"_130":-5,"_131":335,"_133":336,"_155":148,"_149":338,"_151":338,"_154":-5,"_158":159,"_160":339,"_165":-5,"_166":340,"_168":341,"_180":343,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/1006","https://api.github.com/repos/pro-collection/interview-question/issues/1006/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1006/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1006/events","https://github.com/pro-collection/interview-question/issues/1006",2597618887,"I_kwDOJGDC6c6a1ITH",1006,"JS 如何翻转一个字符串【热度: 442】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[334],{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":337,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-10-18T14:05:57Z",{"_162":148,"_163":148,"_164":148},"**关键词**：翻转字符串\n\n在 JavaScript 中，可以通过以下几种方式翻转一个字符串：\n\n**一、使用循环和字符串拼接**\n\n1. 原理：\n\n - 通过从字符串的末尾开始遍历每个字符，并将其依次拼接起来，从而实现字符串的翻转。\n - 首先获取字符串的长度，然后从最后一个字符开始，逐个将字符添加到一个新的字符串中。\n\n2. 代码示例：\n\n```javascript\nfunction reverseString(str) {\n let reversedStr = \"\";\n for (let i = str.length - 1; i >= 0; i--) {\n reversedStr += str[i];\n }\n return reversedStr;\n}\n\nconst originalString = \"hello world\";\nconst reversedString = reverseString(originalString);\nconsole.log(reversedString); // 'dlrow olleh'\n```\n\n**二、使用数组方法和`join`**\n\n1. 原理：\n\n - 将字符串转换为字符数组，然后使用数组的`reverse`方法翻转数组的顺序，最后再使用`join`方法将数组转换回字符串。\n - 这种方法利用了 JavaScript 中数组操作的便利性来实现字符串的翻转。\n\n2. 代码示例：\n\n```javascript\nfunction reverseString(str) {\n return str.split(\"\").reverse().join(\"\");\n}\n\nconst originalString = \"hello world\";\nconst reversedString = reverseString(originalString);\nconsole.log(reversedString); // 'dlrow olleh'\n```\n\n**三、使用递归**\n\n1. 原理：\n\n - 递归地将字符串的最后一个字符与剩余部分的翻转结果拼接起来，直到字符串为空。\n - 每次递归调用都将字符串缩短一个字符，并将最后一个字符放在结果的前面。\n\n2. 代码示例：\n\n```javascript\nfunction reverseString(str) {\n if (str === \"\") {\n return \"\";\n }\n return str[str.length - 1] + reverseString(str.slice(0, -1));\n}\n\nconst originalString = \"hello world\";\nconst reversedString = reverseString(originalString);\nconsole.log(reversedString); // 'dlrow olleh'\n```\n",{"_54":342,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/1006/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1006/timeline",{"_54":345,"_56":57,"_58":346,"_60":347,"_62":348,"_64":349,"_66":350,"_68":351,"_70":352,"_72":353,"_74":354,"_107":355,"_127":128,"_129":26,"_130":-5,"_131":364,"_133":365,"_155":148,"_149":367,"_151":367,"_154":-5,"_158":159,"_160":368,"_165":-5,"_166":369,"_168":370,"_180":372,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/869","https://api.github.com/repos/pro-collection/interview-question/issues/869/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/869/comments","https://api.github.com/repos/pro-collection/interview-question/issues/869/events","https://github.com/pro-collection/interview-question/issues/869",2498581712,"I_kwDOJGDC6c6U7VTQ",869,"实现阿拉伯数字转中文【热度: 673】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[356,363],{"_66":357,"_68":358,"_54":359,"_113":360,"_115":361,"_117":26,"_118":362},5326133419,"LA_kwDOJGDC6c8AAAABPXZYqw","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B0%8F%E7%B1%B3","小米","ededed","公司标签",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":366,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-31T03:12:35Z",{"_162":148,"_163":148,"_164":148},"**关键词**：数字转中文\n\n将阿拉伯数字转换成中文数字，主要考虑到以下几个转换规则：\n\n1. **基本数字**：0-9 对应的汉字数字。\n2. **单位**：十、百、千、万、亿等。\n3. **规则**：数字从右到左，每 4 位一小节，小节内部和小节之间的转换规则。\n\n### 实现思路\n\n1. 将阿拉伯数字分解成单个数字，从右到左进行处理。\n2. 对每 4 位数字进行处理，即一个小节，处理完再根据小节的位置添加对应的单位（万、亿等）。\n3. 处理当前小节内部的数字，并添加十、百、千的单位，注意去除连续的零，并且在必要时加入“零”字。\n4. 将各个小节合并得到最终结果。\n\n下面的 JavaScript 函数实现了阿拉伯数字到中文数字的基本转换：\n\n```js\nconst number2text = (number, type = \"upper\") => {\n // 配置\n const confs = {\n lower: {\n num: [\"零\", \"一\", \"二\", \"三\", \"四\", \"五\", \"六\", \"七\", \"八\", \"九\"],\n unit: [\"\", \"十\", \"百\", \"千\", \"万\"],\n level: [\"\", \"万\", \"亿\"],\n },\n upper: {\n num: [\"零\", \"壹\", \"贰\", \"叁\", \"肆\", \"伍\", \"陆\", \"柒\", \"捌\", \"玖\"],\n unit: [\"\", \"拾\", \"佰\", \"仟\"],\n level: [\"\", \"万\", \"亿\"],\n },\n decimal: {\n unit: [\"分\", \"角\"],\n },\n maxNumber: 999999999999.99,\n };\n\n // 过滤不合法参数\n if (Number(number) > confs.maxNumber) {\n console.error(`The maxNumber is ${confs.maxNumber}. ${number} is bigger than it!`);\n return false;\n }\n\n const conf = confs[type];\n const numbers = String(Number(number).toFixed(2)).split(\".\");\n const integer = numbers[0].split(\"\");\n const decimal = Number(numbers[1]) === 0 ? [] : numbers[1].split(\"\");\n\n // 四位分级\n const levels = integer.reverse().reduce((pre, item, idx) => {\n let level = pre[0] && pre[0].length < 4 ? pre[0] : [];\n let value = item === \"0\" ? conf.num[item] : conf.num[item] + conf.unit[idx % 4];\n level.unshift(value);\n\n if (level.length === 1) {\n pre.unshift(level);\n } else {\n pre[0] = level;\n }\n\n return pre;\n }, []);\n\n // 整数部分\n const _integer = levels.reduce((pre, item, idx) => {\n let _level = conf.level[levels.length - idx - 1];\n let _item = item.join(\"\").replace(/(零)\\1+/g, \"$1\"); // 连续多个零字的部分设置为单个零字\n\n // 如果这一级只有一个零字，则去掉这级\n if (_item === \"零\") {\n _item = \"\";\n _level = \"\";\n\n // 否则如果末尾为零字，则去掉这个零字\n } else if (_item[_item.length - 1] === \"零\") {\n _item = _item.slice(0, _item.length - 1);\n }\n\n return pre + _item + _level;\n }, \"\");\n\n // 小数部分\n let _decimal = decimal\n .map((item, idx) => {\n const unit = confs.decimal.unit;\n const _unit = item !== \"0\" ? unit[unit.length - idx - 1] : \"\";\n\n return `${conf.num[item]}${_unit}`;\n })\n .join(\"\");\n\n // 如果是整数，则补个整字\n return `${_integer}元` + (_decimal || \"整\");\n};\n```\n",{"_54":371,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/869/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/869/timeline",{"_54":374,"_56":57,"_58":375,"_60":376,"_62":377,"_64":378,"_66":379,"_68":380,"_70":381,"_72":382,"_74":383,"_107":384,"_127":128,"_129":26,"_130":-5,"_131":391,"_133":392,"_155":148,"_149":394,"_151":395,"_154":-5,"_158":159,"_160":396,"_165":-5,"_166":397,"_168":398,"_180":400,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/724","https://api.github.com/repos/pro-collection/interview-question/issues/724/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/724/comments","https://api.github.com/repos/pro-collection/interview-question/issues/724/events","https://github.com/pro-collection/interview-question/issues/724",2254463388,"I_kwDOJGDC6c6GYGGc",724,"扁平数据通过 parent 关联, 实现扁平结构转嵌套 tree 结构【热度: 218】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[385,390],{"_66":386,"_68":387,"_54":388,"_113":389,"_115":361,"_117":26,"_118":362},5312738037,"LA_kwDOJGDC6c8AAAABPKny9Q","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%99%BE%E5%BA%A6","百度",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":393,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-04-20T09:07:22Z","2024-04-20T09:07:23Z",{"_162":148,"_163":148,"_164":148},"**关键词**：扁平结构转嵌套结构\n\n**题目**\n\n```\n数据输入：\n[\n { \"name\": \"数据1\", \"parent\": null, \"id\": 1 },\n { \"name\": \"数据2\", \"id\": 2, \"parent\": 1 },\n { \"name\": \"数据3\", \"parent\": 2, \"id\": 3 },\n { \"name\": \"数据4\", \"parent\": 3, \"id\": 4 },\n { \"name\": \"数据5\", \"parent\": 4, \"id\": 5 },\n { \"name\": \"数据6\", \"parent\": 2, \"id\": 6 }\n]\n\n数据输出：\n[\n {\n \"name\": \"数据1\",\n \"parent\": null,\n \"id\": 1,\n \"children\": [\n {\n \"name\": \"数据2\",\n \"id\": 2,\n \"parent\": 1,\n \"children\": [\n {\n \"name\": \"数据3\",\n \"parent\": 2,\n \"id\": 3,\n \"children\": [\n {\n \"name\": \"数据4\",\n \"parent\": 3,\n \"id\": 4,\n \"children\": [\n {\n \"name\": \"数据5\",\n \"parent\": 4,\n \"id\": 5,\n \"children\": []\n }\n ]\n }\n ]\n },\n {\n \"name\": \"数据6\",\n \"parent\": 2,\n \"id\": 6,\n \"children\": []\n }\n ]\n }\n ]\n }\n]\n```\n\n**解**\n\n解法非常有意思，自己好好体会\n\n```js\nfunction listToTree(list) {\n const map = {},\n roots = [];\n\n // 首先将每个节点按照 id 存入 map\n for (const item of list) {\n map[item.id] = { ...item, children: [] };\n }\n\n for (const item of list) {\n if (item.parent === null) {\n // 顶级节点\n roots.push(map[item.id]);\n } else if (map[item.parent]) {\n // 非顶级节点，找到父节点并添加到其 children 数组中\n map[item.parent].children.push(map[item.id]);\n }\n }\n\n return roots;\n}\n\nconst tree = listToTree(list);\n```\n",{"_54":399,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/724/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/724/timeline",{"_54":402,"_56":57,"_58":403,"_60":404,"_62":405,"_64":406,"_66":407,"_68":408,"_70":409,"_72":410,"_74":411,"_107":412,"_127":128,"_129":26,"_130":-5,"_131":415,"_133":416,"_155":148,"_149":418,"_151":418,"_154":-5,"_158":159,"_160":419,"_165":-5,"_166":420,"_168":421,"_180":423,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/723","https://api.github.com/repos/pro-collection/interview-question/issues/723/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/723/comments","https://api.github.com/repos/pro-collection/interview-question/issues/723/events","https://github.com/pro-collection/interview-question/issues/723",2254461151,"I_kwDOJGDC6c6GYFjf",723,"树结构查找，实现一个函数，通过 id 来查找 tree 数据结构对应的节点【热度: 867】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[413,414],{"_66":386,"_68":387,"_54":388,"_113":389,"_115":361,"_117":26,"_118":362},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":417,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-04-20T09:01:01Z",{"_162":148,"_163":148,"_164":148},"**关键词**：树结构查找\n\n树结构查找，实现一个函数，通过 id 来查找 tree 数据结构对应的节点\n\n**题目如下**\n\n```js\n// 数据如下：\nconst tree = [\n {\n name: \"数据1\",\n id: 1,\n children: [\n {\n name: \"数据2\",\n id: 2,\n children: [\n {\n name: \"数据3\",\n id: 3,\n children:\n {\n name: \"数据4\",\n id: 4,\n children: [],\n },\n ],\n },\n ],\n },\n ],\n },\n];\n\nfunction findNodeById(tree, id) {\n // ....\n}\n\nconst res = findNodeById(tree, 3);\n// res 的结果为\n// {\n// name: \"数据3\",\n// id: 3,\n// children: [\n// {\n// name: \"数据4\",\n// id: 4,\n// children: [],\n// },\n// ],\n// }\n```\n\n**实现**\n\n```js\nfunction findNodeById(tree, id) {\n if (!tree.length) return null; // 如果树是空的，则返回 null\n\n const search = (node) => {\n if (node.id === id) {\n // 如果找到一个匹配的节点，返回它\n return node;\n } else if (node.children) {\n // 否则，如果它有子节点，递归地搜索子节点\n for (const child of node.children) {\n const result = search(child);\n if (result) {\n return result; // 如果递归找到了一个匹配的节点，返回它\n }\n }\n }\n return null; // 如果什么都没找到，返回 null\n };\n\n for (const root of tree) {\n const result = search(root);\n if (result) {\n return result; // 如果在根节点中找到了一个匹配的节点，返回它\n }\n }\n\n // 如果循环遍历整个树完成后没有找到，返回 null\n return null;\n}\n\n// 使用\nconst foundNode = findNodeById(tree, 3);\nconsole.log(foundNode); // 将打印出 id 为 3 的节点\n```\n",{"_54":422,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/723/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/723/timeline",{"_54":425,"_56":57,"_58":426,"_60":427,"_62":428,"_64":429,"_66":430,"_68":431,"_70":432,"_72":433,"_74":434,"_107":435,"_127":128,"_129":26,"_130":-5,"_131":442,"_133":443,"_155":148,"_149":445,"_151":446,"_154":-5,"_158":159,"_160":447,"_165":-5,"_166":448,"_168":449,"_180":451,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/644","https://api.github.com/repos/pro-collection/interview-question/issues/644/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/644/comments","https://api.github.com/repos/pro-collection/interview-question/issues/644/events","https://github.com/pro-collection/interview-question/issues/644",2010952234,"I_kwDOJGDC6c533LIq",644,"封装一个请求超时，发起重试的代码【热度: 789】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[436,441],{"_66":437,"_68":438,"_54":439,"_113":440,"_115":361,"_117":26,"_118":362},5562711972,"LA_kwDOJGDC6c8AAAABS5A_pA","https://api.github.com/repos/pro-collection/interview-question/labels/Shopee","Shopee",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":444,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-11-26T08:33:08Z","2023-11-26T08:33:09Z",{"_162":148,"_163":148,"_164":148},"**关键词**：请求重试\n\n看过很多请求超时重试的样例，很多都是基于 axios interceptors 实现的。但是有没有牛逼的原生方式实现呢？\n\n最近在看 fbjs 库里面的代码，发现里面有一个超时重试的代码，只有一百多行代码，封装的极其牛逼。\n\n不过这里的代码是 Flow 类型检测的代码，而且有一些外部小依赖，之后要翻译成 ts 代码。\n\n**这里简单介绍一下 fbjs 这个库**\n\n> fbjs（Facebook JavaScript）是一个由 Facebook 开发和维护的 JavaScript 工具库。它提供了一组通用的 JavaScript 功能和实用工具，用于辅助开发大型、高性能的 JavaScript 应用程序。\n\n说到这儿了，直接上完整代码\n\n```ts\ninterface InitWithRetries extends RequestInit {\n fetchTimeout?: number | null;\n retryDelays?: number[] | null;\n}\n\nconst DEFAULT_TIMEOUT = 1000 * 1.5;\nconst DEFAULT_RETRIES = [0, 0];\n\nconst fetchWithRetries = (url: string, initWithRetries?: InitWithRetries): Promise => {\n // fetchTimeout 请求超时时间\n // 请求\n const { fetchTimeout, retryDelays, ...init } = initWithRetries || {};\n\n // 超时时间\n const _fetchTimeout = fetchTimeout != null ? fetchTimeout : DEFAULT_TIMEOUT;\n\n // 重复时间数组\n const _retryDelays = retryDelays != null ? retryDelays : DEFAULT_RETRIES;\n\n // 开始时间\n let requestStartTime = 0;\n\n // 重试请求索引\n let requestsAttempted = 0;\n\n return new Promise((resolve, reject) => {\n // 申明发送请求方法\n const sendTimedRequest = (): void => {\n // 自增索引与请求次数\n requestsAttempted++;\n\n // 发起请求时间\n requestStartTime = Date.now();\n\n // 是否需要处理后续请求\n let isRequestAlive = true;\n\n // 发起请求\n const request = fetch(url, init);\n\n // 请求超时情况\n const requestTimeout = setTimeout(() => {\n // 需要阻断正常的请求返回\n isRequestAlive = false;\n\n // 需要重新发起请求\n if (shouldRetry(requestsAttempted)) {\n console.warn(\"fetchWithRetries: HTTP timeout, retrying.\");\n retryRequest();\n } else {\n reject(new Error(\n `fetchWithRetries(): Failed to get response from server, tried ${requestsAttempted} times.`,\n ));\n }\n }, _fetchTimeout);\n\n // 正常请求发起\n request.then(response => {\n // 正常请求返回的场景，清空定时器\n clearTimeout(requestTimeout);\n\n // 如果进入了超时流程，那么正常返回的逻辑，就直接阻断\n if (isRequestAlive) {\n if (response.status >= 200 && response.status < 300) {\n resolve(response);\n } else if (shouldRetry(requestsAttempted)) {\n console.warn(\"fetchWithRetries: HTTP error, retrying.\");\n retryRequest();\n } else {\n const error: any = new Error(`response error.`);\n error.response = response;\n reject(error);\n }\n }\n }).catch(error => {\n clearTimeout(requestTimeout);\n if (shouldRetry(requestsAttempted)) {\n retryRequest();\n } else {\n reject(error);\n }\n });\n };\n\n // 发起重复请求\n const retryRequest = (): void => {\n // 重复请求 delay 时间\n const retryDelay = _retryDelays[requestsAttempted - 1];\n\n // 重复请求开始时间\n const retryStartTime = requestStartTime + retryDelay;\n\n // 延迟时间\n const timeout = retryStartTime - Date.now() > 0 ? retryStartTime - Date.now() : 0;\n\n // 重复请求\n setTimeout(sendTimedRequest, timeout);\n };\n\n // 是否可以发起重复请求\n const shouldRetry = (attempt: number): boolean => attempt <= _retryDelays.length;\n\n sendTimedRequest();\n });\n};\n\nfetchWithRetries(\"http://127.0.0.1:3000/user/\")\n```\n",{"_54":450,"_171":185,"_172":185,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/644/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/644/timeline",{"_54":453,"_56":57,"_58":454,"_60":455,"_62":456,"_64":457,"_66":458,"_68":459,"_70":460,"_72":461,"_74":462,"_107":463,"_127":128,"_129":26,"_130":-5,"_131":470,"_133":471,"_155":148,"_149":473,"_151":474,"_154":-5,"_158":159,"_160":475,"_165":-5,"_166":476,"_168":477,"_180":479,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/601","https://api.github.com/repos/pro-collection/interview-question/issues/601/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/601/comments","https://api.github.com/repos/pro-collection/interview-question/issues/601/events","https://github.com/pro-collection/interview-question/issues/601",1955517666,"I_kwDOJGDC6c50jtTi",601,"[代码实现] 手写数组降维flat方法【热度: 244】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[464,469],{"_66":465,"_68":466,"_54":467,"_113":468,"_115":361,"_117":26,"_118":362},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","阿里巴巴",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":472,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-10-21T14:35:10Z","2023-10-21T14:35:26Z",{"_162":148,"_163":148,"_164":148},"**关键词**：JS数组降维、reduce数组降维\n\n原生Array.prototype.flat方法接受一个depth参数，默认值为1，depth表示要降维的维数：\n\n输出结果：\n\n```js\nconst arr = [1, [2, 3], [4, [5, 6]]]\nconsole.log(arr.flat(1)) // [1, 2, 3, 4, [5, 6]]\nconsole.log(arr.flat(Infinity)) // [1, 2, 3, 4, 5, 6]\n```\n\nreduce + 递归实现方案\n\n```js\n// MDN: 可查看更多flat实现方法\nfunction flat(arr = [], depth = 1) {\n if (arr.length === 0) {\n return []\n }\n let result = []\n if (depth > 0) {\n result = arr.reduce((acc, val) => {\n return acc.concat(Array.isArray(val) ? flat(val, depth - 1) : val)\n }, [])\n } else {\n result = arr.slice()\n }\n return result\n}\n\nconst arr = [1, 2, 3, [1, 2, 3, 4, [2, 3, 4]]]\nconst myResult1 = flat(arr, 1)\nconst originResult1 = arr.flat(1)\nconst myResult2 = flat(arr, Infinity)\nconst originResult2 = arr.flat(Infinity)\nconsole.log(myResult1) // [1, 2, 3, 1, 2, 3, 4, [2, 3, 4]]\nconsole.log(originResult1) // [1, 2, 3, 1, 2, 3, 4, [2, 3, 4]]\nconsole.log(myResult2) // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]\nconsole.log(originResult2) // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]\n```\n\n",{"_54":478,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/601/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/601/timeline",{"_54":481,"_56":57,"_58":482,"_60":483,"_62":484,"_64":485,"_66":486,"_68":487,"_70":488,"_72":489,"_74":490,"_107":491,"_127":128,"_129":26,"_130":-5,"_131":494,"_133":495,"_155":148,"_149":497,"_151":498,"_154":-5,"_158":159,"_160":499,"_165":-5,"_166":500,"_168":501,"_180":503,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/600","https://api.github.com/repos/pro-collection/interview-question/issues/600/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/600/comments","https://api.github.com/repos/pro-collection/interview-question/issues/600/events","https://github.com/pro-collection/interview-question/issues/600",1955506343,"I_kwDOJGDC6c50jqin",600,"[代码实现] 手写 dom 分段渲染【热度: 280】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[492,493],{"_66":465,"_68":466,"_54":467,"_113":468,"_115":361,"_117":26,"_118":362},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":496,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-10-21T14:05:34Z","2023-10-21T14:06:42Z",{"_162":148,"_163":148,"_164":148},"**关键词**：dom 分段渲染\n\n分时函数案例：把1秒创建1000个DOM节点，改成每隔200毫秒创建10个节点，这样不用短时间在页面中创建大量的DOM。\n\n```jsx\nvar timeChunk = function(arr,fn,count,interval) {\n var timer = null;\n var data = null;\n var start = function() {\n for(var i = 0 ; i < Math.min(count || 1 , arr.length) ; i++) {\n fn(arr.shift());\n }\n }\n return function() {\n timer = setInterval(function(){\n if(arr.length == 0) {\n clearInterval(timer);\n timer = null;\n return;\n }\n start();\n }, interval || 200)\n }\n}\n\nvar arr = [];\nfor(var i = 0 ; i < 1000 ; i++) {\n arr.push(i);\n}\n\nvar renderDOMList = timeChunk(arr, function(data) {\n var div = document.createElement('div');\n div.innerHTML = data;\n document.body.appendChild(div);\n},10,200);\nrenderDOMList();\n```\n",{"_54":502,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/600/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/600/timeline",{"_54":505,"_56":57,"_58":506,"_60":507,"_62":508,"_64":509,"_66":510,"_68":511,"_70":512,"_72":513,"_74":514,"_107":515,"_127":128,"_129":26,"_130":-5,"_131":522,"_133":523,"_155":148,"_149":525,"_151":526,"_154":-5,"_158":159,"_160":527,"_165":-5,"_166":528,"_168":529,"_180":531,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/599","https://api.github.com/repos/pro-collection/interview-question/issues/599/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/599/comments","https://api.github.com/repos/pro-collection/interview-question/issues/599/events","https://github.com/pro-collection/interview-question/issues/599",1955497329,"I_kwDOJGDC6c50joVx",599,"[代码实现] 不使用 setTimeout 来实现 setInterval【热度: 231】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[516,521],{"_66":517,"_68":518,"_54":519,"_113":520,"_115":361,"_117":26,"_118":362},5312726360,"LA_kwDOJGDC6c8AAAABPKnFWA","https://api.github.com/repos/pro-collection/interview-question/labels/%E8%85%BE%E8%AE%AF","腾讯",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":524,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-10-21T13:40:53Z","2023-10-21T14:06:25Z",{"_162":148,"_163":148,"_164":148},"**关键词**：实现setInterval、requestAnimationFrame实现setInterval、setTimeout实现setInterval\n\n如果不使用 `setTimeout` 来实现 `setInterval`，可以使用 `requestAnimationFrame` 函数和时间戳来实现定时循环。下面是实现的代码示例：\n\n**实现方式1**\n\n```javascript\nfunction mySetInterval(callback, interval) {\n let startTime = Date.now();\n let elapsedTime = 0;\n\n function loop() {\n const currentTime = Date.now();\n const deltaTime = currentTime - startTime;\n\n if (deltaTime >= interval) {\n callback();\n startTime = currentTime;\n }\n\n requestAnimationFrame(loop);\n }\n\n requestAnimationFrame(loop);\n\n return {\n clear: function() {\n startTime = 0;\n elapsedTime = 0;\n }\n };\n}\n```\n\n这个实现中，我们通过 `requestAnimationFrame` 函数来循环执行 `loop` 函数。在 `loop` 函数中，我们获取当前时间戳 `currentTime`，并计算与上一次执行的时间间隔 `deltaTime`\n。如果 `deltaTime` 大于等于指定的间隔时间 `interval`，则执行回调函数 `callback`，并更新 `startTime` 为当前时间，以便下一次判断。\n\n最后，返回一个具有 `clear` 方法的对象，用于清除定时器。调用 `clear` 方法时，将 `startTime` 和 `elapsedTime` 重置为初始值。\n\n**实现方式2**\n\n```js\nconst obj = {\n timer: null,\n setInterval: function(callback, interval) {\n const now = Date.now\n let startTime = now()\n let endTime = startTime\n const self = this\n const loop = function() {\n self.timer = requestAnimationFrame(loop)\n endTime = now()\n if (endTime - startTime >= interval) {\n startTime = endTime = now()\n callback && callback()\n }\n }\n this.timer = requestAnimationFrame(loop)\n return this.timer\n },\n clearInterval: function() {\n cancelAnimationFrame(this.timer)\n }\n}\n\nlet count = 0\nconst timer = obj.setInterval(() => {\n console.log('interval...')\n count++\n if (count >= 3) {\n obj.clearInterval()\n }\n}, 500)\n```\n\n**实现方式3**\n\n使用 `setTimeout` 来实现\n\n```ts\n/**\n * setTimeout 版本\n */\nfunction _setIntervalUseTimeout(\n fn: () => void,\n millisec: number,\n count?: number\n) {\n let timer: number;\n function interval() {\n if (typeof count === 'undefined' || count-- > 0) {\n timer = setTimeout(interval, millisec);\n try {\n fn();\n } catch (e: any) {\n count = 0;\n throw e.toString();\n }\n }\n }\n timer = setTimeout(interval, millisec);\n return {\n clear: () => clearTimeout(timer),\n };\n}\n```\n",{"_54":530,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/599/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/599/timeline",{"_54":533,"_56":57,"_58":534,"_60":535,"_62":536,"_64":537,"_66":538,"_68":539,"_70":540,"_72":541,"_74":542,"_107":543,"_127":128,"_129":26,"_130":-5,"_131":550,"_133":551,"_155":148,"_149":553,"_151":553,"_154":-5,"_158":159,"_160":554,"_165":-5,"_166":555,"_168":556,"_180":558,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/568","https://api.github.com/repos/pro-collection/interview-question/issues/568/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/568/comments","https://api.github.com/repos/pro-collection/interview-question/issues/568/events","https://github.com/pro-collection/interview-question/issues/568",1910291617,"I_kwDOJGDC6c5x3Lyh",568,"实现日期格式化 format 函数【热度: 489】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[544,549],{"_66":545,"_68":546,"_54":547,"_113":548,"_115":361,"_117":26,"_118":362},5312214934,"LA_kwDOJGDC6c8AAAABPKH3lg","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E6%98%93","网易",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":552,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-09-24T16:14:06Z",{"_162":148,"_163":148,"_164":148},"**关键词**：日期format函数、日期format实现\n\n**问题**\n```ts\n// js 实现日期的 format 函数\n//\n// YYYY 对应年\n// MM 对应月\n// DD 对应日\n//\n// HH 对应 24 小时制度\n// hh 对应 12 小时制度\n// mm 对应分钟\n// ss 对应秒\n\nconst date = new Date();\nconst formattedDate = date.format('YYYY-MM-DD HH:mm:ss');\nconsole.log(formattedDate); // 输出结果为当前日期和时间的格式化字符串\n```\n\n\n**解答**\n以下是使用JavaScript实现日期格式化的`format`函数：\n\n```javascript\nDate.prototype.format = function (format) {\n const date = this;\n\n const year = date.getFullYear();\n const month = date.getMonth() + 1;\n const day = date.getDate();\n const hours = date.getHours();\n const minutes = date.getMinutes();\n const seconds = date.getSeconds();\n\n format = format.replace('YYYY', year);\n format = format.replace('MM', month.toString().padStart(2, '0'));\n format = format.replace('DD', day.toString().padStart(2, '0'));\n format = format.replace('HH', hours.toString().padStart(2, '0'));\n format = format.replace('hh', (hours % 12).toString().padStart(2, '0'));\n format = format.replace('mm', minutes.toString().padStart(2, '0'));\n format = format.replace('ss', seconds.toString().padStart(2, '0'));\n\n return format;\n};\n\n// 示例用法\nconst date = new Date();\nconst formattedDate = date.format('YYYY-MM-DD HH:mm:ss');\nconsole.log(formattedDate); // 输出结果为当前日期和时间的格式化字符串\n```\n\n上述代码中，我们通过在`Date`对象的原型上定义`format`函数，使得所有的`Date`对象都可以调用`format`函数进行日期格式化。在函数内部，我们使用`getFullYear`、`getMonth`、`getDate`等方法获取日期的年、月、日、时、分、秒的值，并将其替换到传入的`format`字符串中对应的占位符。最后返回格式化后的字符串。\n",{"_54":557,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/568/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/568/timeline",{"_54":560,"_56":57,"_58":561,"_60":562,"_62":563,"_64":564,"_66":565,"_68":566,"_70":567,"_72":568,"_74":569,"_107":570,"_127":128,"_129":26,"_130":-5,"_131":573,"_133":574,"_155":148,"_149":576,"_151":576,"_154":-5,"_158":159,"_160":577,"_165":-5,"_166":578,"_168":579,"_180":581,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/567","https://api.github.com/repos/pro-collection/interview-question/issues/567/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/567/comments","https://api.github.com/repos/pro-collection/interview-question/issues/567/events","https://github.com/pro-collection/interview-question/issues/567",1910290192,"I_kwDOJGDC6c5x3LcQ",567,"实现一个函数，计算两个日期之间的天数差",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[571,572],{"_66":545,"_68":546,"_54":547,"_113":548,"_115":361,"_117":26,"_118":362},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":185,"_72":241,"_118":242,"_143":575,"_145":244,"_147":148,"_127":128,"_149":245,"_151":246,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-09-24T16:09:44Z",{"_162":148,"_163":148,"_164":148},"以下是使用JavaScript实现计算两个日期之间的天数差的函数：\n\n```javascript\nfunction calculateDateDifference(date1, date2) {\n // 将日期字符串转换为 Date 对象\n const d1 = new Date(date1);\n const d2 = new Date(date2);\n\n // 计算两个日期的时间差（毫秒数）\n const timeDiff = Math.abs(d2.getTime() - d1.getTime());\n\n // 将时间差转换为天数\n const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));\n\n return daysDiff;\n}\n\n// 示例用法\nconst date1 = '2022-01-01';\nconst date2 = '2022-01-10';\n\nconst difference = calculateDateDifference(date1, date2);\nconsole.log(difference); // 输出结果为 9\n```\n\n上述函数首先将两个日期字符串转换为Date对象，然后计算两个日期对象之间的时间差（以毫秒表示），最后将时间差转换为天数。通过调用`calculateDateDifference`函数，可以获取两个日期之间的天数差。\n",{"_54":580,"_171":185,"_172":185,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/567/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/567/timeline",{"_54":583,"_56":57,"_58":584,"_60":585,"_62":586,"_64":587,"_66":588,"_68":589,"_70":590,"_72":591,"_74":592,"_107":593,"_127":128,"_129":26,"_130":-5,"_131":596,"_133":597,"_155":599,"_149":600,"_151":601,"_154":-5,"_158":159,"_160":602,"_165":-5,"_166":603,"_168":604,"_180":606,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/551","https://api.github.com/repos/pro-collection/interview-question/issues/551/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/551/comments","https://api.github.com/repos/pro-collection/interview-question/issues/551/events","https://github.com/pro-collection/interview-question/issues/551",1884318813,"I_kwDOJGDC6c5wUGxd",551,"[代码实现] JS 中数组深对比实现【热度: 985】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[594,595],{"_66":545,"_68":546,"_54":547,"_113":548,"_115":361,"_117":26,"_118":362},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":598,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},6,"2023-09-06T16:00:24Z","2024-08-01T12:15:28Z",{"_162":148,"_163":148,"_164":148},"**关键词**：JS数组对比\r\n\r\n在JavaScript中，可以使用递归的方式实现数组的深度对比。以下是一个示例函数，用于比较两个数组是否相等：\r\n\r\n```javascript\r\n// 判断对象是否相同\r\nfunction deepEqual(obj1, obj2) {\r\n // 检查类型是否相同\r\n if (typeof obj1 !== typeof obj2) {\r\n return false;\r\n }\r\n \r\n // 检查是否是对象或数组\r\n if (typeof obj1 === 'object' && obj1 !== null && obj2 !== null) {\r\n // 检查对象或数组长度是否相同\r\n if (Object.keys(obj1).length !== Object.keys(obj2).length) {\r\n return false;\r\n }\r\n \r\n for (let key in obj1) {\r\n // 递归比较每个属性的值\r\n if (!deepEqual(obj1[key], obj2[key])) {\r\n return false;\r\n }\r\n }\r\n \r\n return true;\r\n }\r\n \r\n // 比较基本类型的值\r\n return obj1 === obj2;\r\n}\r\n\r\nfunction deepArrayEqual(arr1, arr2) {\r\n // 检查数组长度是否相同\r\n if (arr1.length !== arr2.length) {\r\n return false;\r\n }\r\n \r\n for (let i = 0; i < arr1.length; i++) {\r\n const value1 = arr1[i];\r\n const value2 = arr2[i];\r\n \r\n // 递归比较每个元素的值\r\n if (Array.isArray(value1) && Array.isArray(value2)) {\r\n if (!deepArrayEqual(value1, value2)) {\r\n return false;\r\n }\r\n } else if (typeof value1 === 'object' && typeof value2 === 'object') {\r\n if (!deepEqual(value1, value2)) {\r\n return false;\r\n }\r\n } else {\r\n // 比较基本类型的值\r\n if (value1 !== value2) {\r\n return false;\r\n }\r\n }\r\n }\r\n \r\n return true;\r\n}\r\n```\r\n\r\n使用示例：\r\n\r\n```javascript\r\nconst arr1 = [1, [2, 3], { name: 'John' }];\r\nconst arr2 = [1, [2, 3], { name: 'John' }];\r\nconst arr3 = [1, [2, 3], { name: 'Jane' }];\r\n\r\nconsole.log(deepArrayEqual(arr1, arr2)); // true\r\nconsole.log(deepArrayEqual(arr1, arr3)); // false\r\n```\r\n\r\n在上述示例中，`deepArrayEqual`函数会递归比较两个数组的每个元素的值，包括嵌套的数组和对象。如果两个数组是相等的，则返回`true`，否则返回`false`。注意，该函数不会检查函数、正则表达式、日期等复杂类型的值。\r\n",{"_54":605,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/551/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/551/timeline",{"_54":608,"_56":57,"_58":609,"_60":610,"_62":611,"_64":612,"_66":613,"_68":614,"_70":615,"_72":616,"_74":617,"_107":618,"_127":128,"_129":26,"_130":-5,"_131":621,"_133":622,"_155":148,"_149":624,"_151":625,"_154":-5,"_158":159,"_160":626,"_165":-5,"_166":627,"_168":628,"_180":630,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/550","https://api.github.com/repos/pro-collection/interview-question/issues/550/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/550/comments","https://api.github.com/repos/pro-collection/interview-question/issues/550/events","https://github.com/pro-collection/interview-question/issues/550",1884284920,"I_kwDOJGDC6c5wT-f4",550,"[代码实现] JS 中如何实现大对象深度对比【热度: 906】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[619,620],{"_66":386,"_68":387,"_54":388,"_113":389,"_115":361,"_117":26,"_118":362},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":623,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-09-06T15:39:53Z","2023-09-06T15:51:26Z",{"_162":148,"_163":148,"_164":148},"**关键词**：JS对象对比\n\n在JavaScript中，可以使用递归的方式实现大对象的深度对比。以下是一个示例函数，用于比较两个大对象的每个属性是否相等：\n\n```javascript\nfunction deepEqual(obj1, obj2) {\n // 检查类型是否相同\n if (typeof obj1 !== typeof obj2) {\n return false;\n }\n \n // 检查是否是对象或数组\n if (typeof obj1 === 'object' && obj1 !== null && obj2 !== null) {\n // 检查对象或数组长度是否相同\n if (Object.keys(obj1).length !== Object.keys(obj2).length) {\n return false;\n }\n \n for (let key in obj1) {\n // 递归比较每个属性的值\n if (!deepEqual(obj1[key], obj2[key])) {\n return false;\n }\n }\n \n return true;\n }\n \n // 比较基本类型的值\n return obj1 === obj2;\n}\n```\n\n使用示例：\n\n```javascript\nconst obj1 = {\n name: 'John',\n age: 30,\n address: {\n street: '123 Main St',\n city: 'New York'\n }\n};\n\nconst obj2 = {\n name: 'John',\n age: 30,\n address: {\n street: '123 Main St',\n city: 'New York'\n }\n};\n\nconst obj3 = {\n name: 'Jane',\n age: 25,\n address: {\n street: '456 Park Ave',\n city: 'Los Angeles'\n }\n};\n\nconsole.log(deepEqual(obj1, obj2)); // true\nconsole.log(deepEqual(obj1, obj3)); // false\n```\n\n在上述示例中，`deepEqual`函数会递归比较两个对象的每个属性的值，包括嵌套的对象或数组。如果两个对象是相等的，则返回`true`，否则返回`false`。注意，该函数不会检查函数、正则表达式、日期等复杂类型的值。\n",{"_54":629,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/550/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/550/timeline",{"_54":632,"_56":57,"_58":633,"_60":634,"_62":635,"_64":636,"_66":637,"_68":638,"_70":639,"_72":640,"_74":641,"_107":642,"_127":128,"_129":26,"_130":-5,"_131":645,"_133":646,"_155":148,"_149":648,"_151":649,"_154":-5,"_158":159,"_160":650,"_165":-5,"_166":651,"_168":652,"_180":654,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/521","https://api.github.com/repos/pro-collection/interview-question/issues/521/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/521/comments","https://api.github.com/repos/pro-collection/interview-question/issues/521/events","https://github.com/pro-collection/interview-question/issues/521",1858148109,"I_kwDOJGDC6c5uwRcN",521,"[代码实现] 实现一个可以用for...of遍历的对象【热度: 653】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[643,644],{"_66":517,"_68":518,"_54":519,"_113":520,"_115":361,"_117":26,"_118":362},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":647,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-08-20T14:41:49Z","2023-09-06T15:51:38Z",{"_162":148,"_163":148,"_164":148},"**关键词**：for...in遍历、for...of遍历\n\n普通对象因为没有迭代器，所以无法使用for...of遍历，一般使用for...in或者Object.keys()来遍历\n\n但是如果我们手动给对象设置一个迭代器，对象也是可以使用for...of来遍历的;\n\n```js\nvar obj = {\n a:1,\n b:2,\n c:3\n}\n\nobj.__proto__[Symbol.iterator] = function* objectIterator() {\n for (let key in this) {\n if (obj.hasOwnProperty(key)) {\n yield [key, this[key]]\n }\n }\n}\n\nfor(let v of obj){\n console.log(v);\n}\n//['a',1]\n//['b',2]\n//['c',3]\n```\n",{"_54":653,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/521/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/521/timeline",{"_54":656,"_56":57,"_58":657,"_60":658,"_62":659,"_64":660,"_66":661,"_68":662,"_70":663,"_72":664,"_74":665,"_107":666,"_127":128,"_129":26,"_130":-5,"_131":668,"_133":669,"_155":148,"_149":671,"_151":672,"_154":-5,"_158":159,"_160":673,"_165":-5,"_166":674,"_168":675,"_180":677,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/500","https://api.github.com/repos/pro-collection/interview-question/issues/500/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/500/comments","https://api.github.com/repos/pro-collection/interview-question/issues/500/events","https://github.com/pro-collection/interview-question/issues/500",1824478586,"I_kwDOJGDC6c5sv1V6",500,"[代码实现] 根据 path 来解析数组，生成多维度的数组对象",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[667],{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":670,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-07-27T14:18:05Z","2023-09-06T15:51:41Z",{"_162":148,"_163":148,"_164":148},"请手写一个函数，将下面的树形结构，进行转换：\r\n\r\n输入数据结构\r\n```js\r\nconst data = [\r\n { id: 0, label: '测试 - 0', path: 'demo.info' },\r\n { id: 1, label: '测试 - 1', path: 'demo.info' },\r\n { id: 2, label: '测试 - 2', path: 'common.base' },\r\n { id: 3, label: '测试 - 3', path: 'common.base' },\r\n { id: 4, label: '测试 - 4', path: 'demo.info' },\r\n { id: 5, label: '测试 - 5', path: 'demo.info' },\r\n { id: 6, label: '测试 - 6', path: 'common' },\r\n { id: 7, label: '测试 - 7', path: 'common' },\r\n { id: 8, label: '测试 - 8', path: 'common.address' },\r\n { id: 9, label: '测试 - 9', path: 'common.address' },\r\n { id: 10, label: '测试 - 10', path: 'demo.info' },\r\n { id: 11, label: '测试 - 11', path: 'demo.sence' },\r\n { id: 12, label: '测试 - 12', path: 'demo.sence' },\r\n { id: 13, label: '测试 - 13', path: 'demo.hash' },\r\n { id: 14, label: '测试 - 14', path: 'demo.hash' },\r\n { id: 15, label: '测试 - 15', path: 'demo.hash' },\r\n { id: 16, label: '测试 - 16', path: 'demo' },\r\n { id: 17, label: '测试 - 17', path: 'demo' },\r\n { id: 18, label: '测试 - 18', path: 'demo.info' },\r\n { id: 19, label: '测试 - 19', path: 'demo.info' }\r\n];\r\n```\r\n\r\n输出数据结构\r\n```json\r\n[\r\n {\r\n \"value\": \"demo\",\r\n \"label\": \"Demo\",\r\n \"children\": [\r\n {\r\n \"value\": \"info\",\r\n \"label\": \"Info\",\r\n \"children\": [\r\n {\r\n \"value\": 0,\r\n \"label\": \"测试 - 0\"\r\n },\r\n {\r\n \"value\": 1,\r\n \"label\": \"测试 - 1\"\r\n },\r\n {\r\n \"value\": 4,\r\n \"label\": \"测试 - 4\"\r\n },\r\n {\r\n \"value\": 5,\r\n \"label\": \"测试 - 5\"\r\n },\r\n {\r\n \"value\": 10,\r\n \"label\": \"测试 - 10\"\r\n },\r\n {\r\n \"value\": 18,\r\n \"label\": \"测试 - 18\"\r\n },\r\n {\r\n \"value\": 19,\r\n \"label\": \"测试 - 19\"\r\n }\r\n ]\r\n },\r\n {\r\n \"value\": \"sence\",\r\n \"label\": \"Sence\",\r\n \"children\": [\r\n {\r\n \"value\": 11,\r\n \"label\": \"测试 - 11\"\r\n },\r\n {\r\n \"value\": 12,\r\n \"label\": \"测试 - 12\"\r\n }\r\n ]\r\n },\r\n {\r\n \"value\": \"hash\",\r\n \"label\": \"Hash\",\r\n \"children\": [\r\n {\r\n \"value\": 13,\r\n \"label\": \"测试 - 13\"\r\n },\r\n {\r\n \"value\": 14,\r\n \"label\": \"测试 - 14\"\r\n },\r\n {\r\n \"value\": 15,\r\n \"label\": \"测试 - 15\"\r\n }\r\n ]\r\n },\r\n {\r\n \"value\": 16,\r\n \"label\": \"测试 - 16\"\r\n },\r\n {\r\n \"value\": 17,\r\n \"label\": \"测试 - 17\"\r\n }\r\n ]\r\n },\r\n {\r\n \"value\": \"common\",\r\n \"label\": \"Common\",\r\n \"children\": [\r\n {\r\n \"value\": \"base\",\r\n \"label\": \"Base\",\r\n \"children\": [\r\n {\r\n \"value\": 2,\r\n \"label\": \"测试 - 2\"\r\n },\r\n {\r\n \"value\": 3,\r\n \"label\": \"测试 - 3\"\r\n }\r\n ]\r\n },\r\n {\r\n \"value\": 6,\r\n \"label\": \"测试 - 6\"\r\n },\r\n {\r\n \"value\": 7,\r\n \"label\": \"测试 - 7\"\r\n },\r\n {\r\n \"value\": \"address\",\r\n \"label\": \"Address\",\r\n \"children\": [\r\n {\r\n \"value\": 8,\r\n \"label\": \"测试 - 8\"\r\n },\r\n {\r\n \"value\": 9,\r\n \"label\": \"测试 - 9\"\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n]\r\n```\r\n\r\n**实现如下**：\r\n```js\r\nfunction convertToThreeDimensionalArray(data) {\r\n const result = [];\r\n\r\n // Create a map to store the path hierarchy\r\n const pathMap = new Map();\r\n\r\n // Iterate through the data\r\n for (let i = 0; i < data.length; i++) {\r\n const item = data[i];\r\n const pathArr = item.path.split('.'); // Split the path into an array of sub-paths\r\n\r\n let parent = result;\r\n for (let j = 0; j < pathArr.length; j++) {\r\n const subPath = pathArr[j];\r\n\r\n // Check if the subPath exists in the parent\r\n let child = parent.find(obj => obj.value === subPath);\r\n\r\n if (!child) {\r\n // Create a new child object\r\n child = {\r\n value: subPath,\r\n label: capitalizeFirstLetter(subPath),\r\n children: [],\r\n };\r\n\r\n // Add the child object to the parent\r\n parent.push(child);\r\n }\r\n\r\n // Update the parent to be the child's children array\r\n parent = child.children;\r\n }\r\n\r\n // Add the item to the final child array\r\n parent.push({\r\n value: item.id,\r\n label: item.label,\r\n });\r\n }\r\n\r\n return result;\r\n}\r\n\r\nfunction capitalizeFirstLetter(string) {\r\n return string.charAt(0).toUpperCase() + string.slice(1);\r\n}\r\n\r\nconst threeDimensionalArray = convertToThreeDimensionalArray(data);\r\nconsole.log(threeDimensionalArray);\r\n````",{"_54":676,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/500/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/500/timeline",{"_54":679,"_56":57,"_58":680,"_60":681,"_62":682,"_64":683,"_66":684,"_68":685,"_70":686,"_72":687,"_74":688,"_107":689,"_127":128,"_129":26,"_130":-5,"_131":692,"_133":693,"_155":148,"_149":695,"_151":696,"_154":-5,"_158":159,"_160":697,"_165":-5,"_166":698,"_168":699,"_180":701,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/492","https://api.github.com/repos/pro-collection/interview-question/issues/492/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/492/comments","https://api.github.com/repos/pro-collection/interview-question/issues/492/events","https://github.com/pro-collection/interview-question/issues/492",1822652943,"I_kwDOJGDC6c5so3oP",492,"[代码实现] 实现管道函数【热度: 540】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[690,691],{"_66":437,"_68":438,"_54":439,"_113":440,"_115":361,"_117":26,"_118":362},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":694,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-07-26T15:22:44Z","2023-09-06T15:51:44Z",{"_162":148,"_163":148,"_164":148},"**关键词**：JS 管道函数、JS 管道函数实现\n\n管道函数是一种函数编程的概念，它可以将多个函数串联起来，将前一个函数的输出作为后一个函数的输入。以下是一个简单的实现示例：\n\n```javascript\n// 简化版的管道函数实现\nfunction pipe(...fns) {\n return function(input) {\n return fns.reduce((output, fn) => fn(output), input);\n };\n}\n\n// 示例函数\nfunction addOne(num) {\n return num + 1;\n}\n\nfunction double(num) {\n return num * 2;\n}\n\nfunction square(num) {\n return num ** 2;\n}\n\n// 创建一个管道函数\nconst myPipe = pipe(addOne, double, square);\n\n// 使用管道函数进行计算\nconst result = myPipe(2); // 2 -> addOne -> 3 -> double -> 6 -> square -> 36\n\nconsole.log(result); // 输出 36\n```\n\n在上述示例中，我们首先定义了三个简单的示例函数：addOne、double和square。然后，通过调用pipe函数，将这三个函数串联起来创建了一个管道函数myPipe。最后，我们可以通过调用myPipe函数并传入初始值2，得到最终的计算结果36。\n\n在管道函数的实现中，使用了ES6的扩展运算符（...）和Array的reduce方法。reduce方法接受一个累加器函数和初始值，并将累加器函数应用于数组的每个元素，返回最终的累积结果。在这里，累加器函数将前一个函数的输出作为后一个函数的输入，从而实现了函数的串联。\n",{"_54":700,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/492/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/492/timeline",{"_54":703,"_56":57,"_58":704,"_60":705,"_62":706,"_64":707,"_66":708,"_68":709,"_70":710,"_72":711,"_74":712,"_107":713,"_127":128,"_129":26,"_130":-5,"_131":720,"_133":721,"_155":148,"_149":723,"_151":724,"_154":-5,"_158":159,"_160":725,"_165":-5,"_166":726,"_168":727,"_180":729,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/461","https://api.github.com/repos/pro-collection/interview-question/issues/461/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/461/comments","https://api.github.com/repos/pro-collection/interview-question/issues/461/events","https://github.com/pro-collection/interview-question/issues/461",1757137572,"I_kwDOJGDC6c5ou8qk",461,"[代码实现] 实现数组的flat方法，支持深度层级参数",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[714,719],{"_66":715,"_68":716,"_54":717,"_113":718,"_115":361,"_117":26,"_118":362},5316900032,"LA_kwDOJGDC6c8AAAABPOl0wA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BA%AC%E4%B8%9C","京东",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":722,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-06-14T15:13:38Z","2023-09-06T15:52:11Z",{"_162":148,"_163":148,"_164":148},"可以通过传入一个深度参数来限制 flat 方法的递归深度。实现如下：\n\n```\nfunction flat(arr, depth = 1) {\n let res = [];\n for (let i = 0; i < arr.length; i++) {\n if (Array.isArray(arr[i]) && depth > 0) {\n res = res.concat(flat(arr[i], depth - 1));\n } else {\n res.push(arr[i]);\n }\n }\n return res;\n}\n```\n\n这里在原有的 flat 方法基础上增加了一个 depth 参数，每递归一层，深度就减一，当深度为 0 时就不再递归。\n",{"_54":728,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/461/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/461/timeline",{"_54":731,"_56":57,"_58":732,"_60":733,"_62":734,"_64":735,"_66":736,"_68":737,"_70":738,"_72":739,"_74":740,"_107":741,"_127":128,"_129":26,"_130":-5,"_131":748,"_133":749,"_155":148,"_149":751,"_151":752,"_154":-5,"_158":159,"_160":753,"_165":-5,"_166":754,"_168":755,"_180":757,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/460","https://api.github.com/repos/pro-collection/interview-question/issues/460/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/460/comments","https://api.github.com/repos/pro-collection/interview-question/issues/460/events","https://github.com/pro-collection/interview-question/issues/460",1755257972,"I_kwDOJGDC6c5onxx0",460,"[代码实现] 手写实现 instanceof【热度: 535】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[742,747],{"_66":743,"_68":744,"_54":745,"_113":746,"_115":361,"_117":26,"_118":362},5597035813,"LA_kwDOJGDC6c8AAAABTZv9JQ","https://api.github.com/repos/pro-collection/interview-question/labels/PDD","PDD",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":185,"_72":241,"_118":242,"_143":750,"_145":244,"_147":148,"_127":128,"_149":245,"_151":246,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-06-13T16:18:14Z","2023-09-06T15:52:15Z",{"_162":148,"_163":148,"_164":148},"**关键词**：instanceof原理、instanceof实现、instanceof手写\n\ninstanceof 运算符用于检测一个对象是否是某个构造函数的实例。其作用是判断一个对象是否属于某个类（或其父类）的实例，类似于类的继承关系，如果是则返回 true，否则返回 false。通常情况下，用于判断一个对象的类型或类别。可以结合构造函数和原型链来理解。\n\n示例代码：\n\n```javascript\nfunction Person(name) {\n this.name = name;\n}\n\nconst person = new Person(\"张三\");\nconsole.log(person instanceof Person); // Output: true\nconsole.log(person instanceof Object); // Output: true\nconsole.log(person instanceof Array); // Output: false\n```\n\n在上面的示例中，我们通过 `new` 关键字创建了一个 Person 类的实例 `person`。然后我们使用 `instanceof` 运算符检测 `person` 对象是否是 `Person` 类的实例，结果为 true。同样地，我们也可以检测 `person` 对象是否是 `Object` 类的实例，结果也为 true，因为 `Person` 类是 `Object` 类的子类。而 `Array` 类则是 `Object` 类的子类，但不是 `Person` 类的子类，因此检测 `person` 对象是否是 `Array` 类的实例，结果为 false。\n\n**手写实现**\n\ninstanceof 运算符用于检测一个对象是否是某个构造函数的实例。可以通过以下方式手写实现 instanceof 运算符。\n\n```javascript\nfunction myInstanceof(obj, constructor) {\n let proto = Object.getPrototypeOf(obj);\n while(proto) {\n if(proto === constructor.prototype) {\n return true;\n }\n proto = Object.getPrototypeOf(proto);\n }\n return false;\n}\n\n// Example usage\nconst arr = [1, 2, 3];\nconsole.log(myInstanceof(arr, Array)); // Output: true\nconsole.log(myInstanceof(arr, Object)); // Output: true\nconsole.log(myInstanceof(arr, RegExp)); // Output: false\n```\n\n该实现方式获取传入对象的原型对象，并逐层向上搜索其原型链，直到找到目标构造函数的原型对象或者原型链到达最顶层 Object.prototype。如果找到目标构造函数的原型对象，则返回 true，否则返回 false。\n\n",{"_54":756,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/460/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/460/timeline",{"_54":759,"_56":57,"_58":760,"_60":761,"_62":762,"_64":763,"_66":764,"_68":765,"_70":766,"_72":767,"_74":768,"_107":769,"_127":128,"_129":26,"_130":-5,"_131":772,"_133":773,"_155":148,"_149":775,"_151":776,"_154":-5,"_158":159,"_160":777,"_165":-5,"_166":778,"_168":779,"_180":781,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/459","https://api.github.com/repos/pro-collection/interview-question/issues/459/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/459/comments","https://api.github.com/repos/pro-collection/interview-question/issues/459/events","https://github.com/pro-collection/interview-question/issues/459",1755252543,"I_kwDOJGDC6c5onwc_",459,"[代码实现] 手写实现 Object.create【热度: 179】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[770,771],{"_66":357,"_68":358,"_54":359,"_113":360,"_115":361,"_117":26,"_118":362},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":185,"_72":241,"_118":242,"_143":774,"_145":244,"_147":148,"_127":128,"_149":245,"_151":246,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-06-13T16:15:06Z","2023-09-06T15:52:19Z",{"_162":148,"_163":148,"_164":148},"**关键词**：Object.create实现、Object.create手写\n\nObject.create() 方法可以用于创建一个新对象，使其原型与指定的对象完全相同。可以通过以下方式手写实现 Object.create() 方法。\n\n```javascript\nfunction createObject(proto) {\n function F() {}\n F.prototype = proto;\n return new F();\n}\n\n// Example usage\nconst person = {\n firstName: 'John',\n lastName: 'Doe',\n fullName: function() {\n return this.firstName + ' ' + this.lastName;\n }\n};\n\nconst anotherPerson = createObject(person);\nanotherPerson.firstName = 'Jane';\nconsole.log(anotherPerson.fullName()); // Output: \"Jane Doe\"\n```\n\n该实现方式创建了一个名为 F 的空函数，将其原型设置为传入的 proto 对象，然后返回一个新创建的 F 函数对象。这个新对象的原型与传入的 proto 对象相同，从而实现了 Object.create() 的功能。\n",{"_54":780,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/459/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/459/timeline",{"_54":783,"_56":57,"_58":784,"_60":785,"_62":786,"_64":787,"_66":788,"_68":789,"_70":790,"_72":791,"_74":792,"_107":793,"_127":128,"_129":26,"_130":-5,"_131":796,"_133":797,"_155":148,"_149":799,"_151":800,"_154":-5,"_158":159,"_160":801,"_165":-5,"_166":802,"_168":803,"_180":805,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/448","https://api.github.com/repos/pro-collection/interview-question/issues/448/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/448/comments","https://api.github.com/repos/pro-collection/interview-question/issues/448/events","https://github.com/pro-collection/interview-question/issues/448",1753047359,"I_kwDOJGDC6c5ofWE_",448,"[代码实现] 手写实现一个缓存函数 memoize【热度: 787】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[794,795],{"_66":357,"_68":358,"_54":359,"_113":360,"_115":361,"_117":26,"_118":362},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":798,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-06-12T15:45:47Z","2023-09-06T15:52:23Z",{"_162":148,"_163":148,"_164":148},"**关键词**：缓存函数实现、memoize函数\n\n用于创建一个带有缓存功能的函数。下面是一个简化版本的手写实现，展示了如何自己实现 `memoize` 函数：\n\n```javascript\nfunction memoize(func) {\n const cache = {};\n\n return function (...args) {\n const key = JSON.stringify(args);\n\n if (cache[key]) {\n return cache[key];\n }\n\n const result = func.apply(this, args);\n cache[key] = result;\n\n return result;\n };\n}\n\n// 示例用法\nconst expensiveFunction = memoize(function (n) {\n console.log('Computing...');\n return n * 2;\n});\n\nconsole.log(expensiveFunction(5)); // 第一次调用，输出：Computing... 10\nconsole.log(expensiveFunction(5)); // 第二次调用，直接从缓存中获取结果，输出：10\nconsole.log(expensiveFunction(10)); // 新的参数，再次计算并缓存结果，输出：Computing... 20\nconsole.log(expensiveFunction(10)); // 再次调用，直接从缓存中获取结果，输出：20\n```\n\n上述代码中的 `memoize` 函数接受一个函数 `func` 作为参数，并返回一个新的函数。返回的函数具有缓存的能力，即根据参数的不同缓存计算结果。\n\n在返回的函数内部，首先将传入的参数 `args` 转换成一个唯一的字符串 `key`，以便作为缓存对象 `cache` 然后检查 `cache` 对象中是否存在对应的缓存结果，如果存在直接返回缓存结果，否则执行原始函数 `func` 并将结果缓存起来。\n\n通过这种方式，对于相同的参数，后续的调用将直接从缓存中获取结果，而不会再次执行函数。这样可以避免重复计算，提高函数的性能。\n\n在示例中，我们创建了一个名为 `expensiveFunction` 的函数，并使用 `memoize` 进行包装。第一次调用时，函数会执行计算，并输出 `\"Computing...\"`，结果为 10。第二次调用时，函数直接从缓存中获取结果，无需再次计算。最后两次调用分别使用了不同的参数，会触发新的计算并缓存结果。\n\n需要注意的是，这个手写的 `memoize` 函数是一个简化版本，仅适用于参数为基本类型的情况。对于参数为复杂类型（如对象、数组等）的情况，需要使用更复杂的缓存键值生成方法，以确保正确的缓存行为。此外，实际的 Lodash 库中的 `memoize` 函数还提供了其他选项和功能，例如自定义缓存键生成函数、缓存过期时间等。\n",{"_54":804,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/448/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/448/timeline",{"_54":807,"_56":57,"_58":808,"_60":809,"_62":810,"_64":811,"_66":812,"_68":813,"_70":814,"_72":815,"_74":816,"_107":817,"_127":128,"_129":26,"_130":-5,"_131":825,"_133":826,"_155":185,"_149":828,"_151":829,"_154":-5,"_158":159,"_160":830,"_165":-5,"_166":831,"_168":832,"_180":834,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/393","https://api.github.com/repos/pro-collection/interview-question/issues/393/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/393/comments","https://api.github.com/repos/pro-collection/interview-question/issues/393/events","https://github.com/pro-collection/interview-question/issues/393",1732575475,"I_kwDOJGDC6c5nRQDz",393,"实现一个JS 函数，解析 url 参数，返回一个对象",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[818,819,824],{"_66":437,"_68":438,"_54":439,"_113":440,"_115":361,"_117":26,"_118":362},{"_66":820,"_68":821,"_54":822,"_113":823,"_115":361,"_117":26,"_118":362},5748783891,"LA_kwDOJGDC6c8AAAABVqd7Ew","https://api.github.com/repos/pro-collection/interview-question/labels/%E6%BB%B4%E6%BB%B4","滴滴",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":827,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-05-30T16:13:53Z","2023-09-13T06:18:18Z",{"_162":148,"_163":148,"_164":148},"### 基础版本\n\n下面是一个简单的 JavaScript 函数，用于解析 URL 参数并返回一个包含参数键值对的对象：\n\n```javascript\nfunction parseUrlParams(url) {\n const params = {};\n const queryString = url.split('?')[1];\n\n if (queryString) {\n const pairs = queryString.split('&');\n pairs.forEach(pair => {\n const [key, value] = pair.split('=');\n params[key] = decodeURIComponent(value);\n });\n }\n\n return params;\n}\n```\n\n这个函数接受一个 URL 字符串作为参数，并返回解析后的参数对象。例如：\n\n```javascript\nconst url = 'https://example.com?name=John&age=30&city=New%20York';\nconst params = parseUrlParams(url);\n\nconsole.log(params);\n// Output: { name: \"John\", age: \"30\", city: \"New York\" }\n```\n\n这个函数的实现思路是先从 URL 字符串中提取查询字符串部分，然后将查询字符串按照 `&` 分割成键值对数组。接着遍历键值对数组，将每个键值对按照 `=` 分割，然后将键和值存储到结果对象 `params` 中，注意要对值进行 URL 解码以处理特殊字符。最后返回解析后的参数对象。\n\n\n### 进阶 - 支持json字符串参数\n\n如果要支持复杂的 JSON 字符串作为查询参数，可以使用 `JSON.parse()` 方法解析 JSON 字符串，并在解析后的对象中处理参数。\n\n下面是一个修改后的函数，支持解析复杂的 JSON 字符串作为查询参数：\n\n```javascript\nfunction parseUrlParams(url) {\n const params = {};\n const queryString = url.split('?')[1];\n\n if (queryString) {\n const pairs = queryString.split('&');\n pairs.forEach(pair => {\n const [key, value] = pair.split('=');\n const decodedValue = decodeURIComponent(value);\n\n try {\n params[key] = JSON.parse(decodedValue);\n } catch (error) {\n // 如果解析 JSON 失败，则将原始字符串存储到参数对象中\n params[key] = decodedValue;\n }\n });\n }\n\n return params;\n}\n```\n\n现在，如果查询参数是一个 JSON 字符串，它将被解析为相应的 JavaScript 对象，并作为参数对象的值。如果解析失败（例如，不是有效的 JSON 字符串），则将保留原始字符串作为值存储在参数对象中。\n\n以下是一个示例：\n\n```javascript\nconst url = 'https://example.com?name=John&age=30&address={\"city\":\"New York\",\"zipcode\":10001}';\nconst params = parseUrlParams(url);\n\nconsole.log(params);\n// Output: { name: \"John\", age: \"30\", address: { city: \"New York\", zipcode: 10001 } }\n```\n\n### 再次进阶-支持更复杂的场景，比如嵌套对象，数组\n\n下面是修改后的函数，支持解析复杂的查询参数，包括嵌套对象和数组：\n\n```javascript\nfunction parseUrlParams(url) {\n const params = {};\n const queryString = url.split('?')[1];\n\n if (queryString) {\n const pairs = queryString.split('&');\n pairs.forEach(pair => {\n const [key, value] = pair.split('=');\n const decodedValue = decodeURIComponent(value);\n\n const keys = key.split('.');\n let current = params;\n\n for (let i = 0; i < keys.length; i++) {\n const nestedKey = keys[i];\n const isArray = /\\[\\]$/.test(nestedKey);\n\n if (isArray) {\n const arrayKey = nestedKey.slice(0, -2);\n\n if (!current[arrayKey]) {\n current[arrayKey] = [];\n }\n\n if (i === keys.length - 1) {\n current[arrayKey].push(parseValue(decodedValue));\n } else {\n const newIndex = current[arrayKey].length;\n if (!current[arrayKey][newIndex]) {\n current[arrayKey][newIndex] = {};\n }\n current = current[arrayKey][newIndex];\n }\n } else {\n if (i === keys.length - 1) {\n current[nestedKey] = parseValue(decodedValue);\n } else {\n if (!current[nestedKey]) {\n current[nestedKey] = {};\n }\n current = current[nestedKey];\n }\n }\n }\n });\n }\n\n return params;\n}\n\nfunction parseValue(value) {\n try {\n return JSON.parse(value);\n } catch (error) {\n // 解析失败，则返回原始值\n return value;\n }\n}\n```\n\n现在，该函数可以正确解析包含嵌套对象和数组的查询参数。\n\n以下是一个示例：\n\n```javascript\nconst url = 'https://example.com?name=John&age=30&address.city=New%20York&address.zipcode=10001&tags[]=tag1&tags[]=tag2';\nconst params = parseUrlParams(url);\n\nconsole.log(params);\n// Output: { name: \"John\", age: \"30\", address: { city: \"New York\", zipcode: 10001 }, tags: [\"tag1\", \"tag2\"] }\n```\n\n在这个修改后的函数中，当遇到嵌套对象时，它会递归创建相应的对象属性。当遇到数组时，它会创建一个数组，并将值添加到数组中。\n\n",{"_54":833,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/393/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/393/timeline",{"_54":836,"_56":57,"_58":837,"_60":838,"_62":839,"_64":840,"_66":841,"_68":842,"_70":843,"_72":844,"_74":845,"_107":846,"_127":128,"_129":26,"_130":-5,"_131":848,"_133":849,"_155":148,"_149":851,"_151":852,"_154":-5,"_158":159,"_160":853,"_165":-5,"_166":854,"_168":855,"_180":857,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/296","https://api.github.com/repos/pro-collection/interview-question/issues/296/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/296/comments","https://api.github.com/repos/pro-collection/interview-question/issues/296/events","https://github.com/pro-collection/interview-question/issues/296",1673409124,"I_kwDOJGDC6c5jvjJk",296,"[代码实现] 数字千分化的实现方式有哪些？用代码实现一下【热度: 3,309】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[847],{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":850,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-04-18T15:48:05Z","2023-09-06T15:52:29Z",{"_162":148,"_163":148,"_164":148},"数字千分化是指将数字按照千位分隔符进行分割，使其更容易被人类阅读。在 JavaScript 中，可以通过多种方式实现数字千分化，以下是其中的几种方式：\n\n1. 使用正则表达式\n\n```javascript\nfunction formatNumber(num) {\n return num.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n}\n\nconsole.log(formatNumber(123456789)); // 输出 123,456,789\n```\n\n2. 使用 Intl.NumberFormat\n\n```javascript\nfunction formatNumber(num) {\n return new Intl.NumberFormat().format(num);\n}\n\nconsole.log(formatNumber(123456789)); // 输出 123,456,789（在大多数环境中）\n```\n\n3. 使用自带千分位分隔符的 toLocaleString\n\n```javascript\nfunction formatNumber(num) {\n return num.toLocaleString();\n}\n\nconsole.log(formatNumber(123456789)); // 输出 123,456,789（在大多数环境中）\n```\n\n这些方法都可以实现数字千分化，具体选择哪种方法，可以根据实际需求和代码环境进行选择。",{"_54":856,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/296/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/296/timeline",{"_54":859,"_56":57,"_58":860,"_60":861,"_62":862,"_64":863,"_66":864,"_68":865,"_70":866,"_72":867,"_74":868,"_107":869,"_127":128,"_129":26,"_130":-5,"_131":871,"_133":872,"_155":148,"_149":874,"_151":875,"_154":-5,"_158":159,"_160":876,"_165":-5,"_166":877,"_168":878,"_180":880,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/279","https://api.github.com/repos/pro-collection/interview-question/issues/279/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/279/comments","https://api.github.com/repos/pro-collection/interview-question/issues/279/events","https://github.com/pro-collection/interview-question/issues/279",1664633718,"I_kwDOJGDC6c5jOEt2",279,"[代码实现] 简单实现一个洋葱模式中间件",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[870],{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":873,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-04-12T14:02:02Z","2023-09-06T15:52:33Z",{"_162":148,"_163":148,"_164":148},"洋葱模型是一种常用的中间件模型，例如在 Koa 框架中就广泛应用了这种模型。这种模型的特点是请求被传递到下一个中间件之前，需要先经过当前中间件处理，然后再逐层返回。\n\n下面是一个简单的洋葱模型的示例代码：\n\n```javascript\nfunction middleware1(next) {\n return function(ctx) {\n console.log('middleware1 before');\n next(ctx);\n console.log('middleware1 after');\n }\n}\n\nfunction middleware2(next) {\n return function(ctx) {\n console.log('middleware2 before');\n next(ctx);\n console.log('middleware2 after');\n }\n}\n\nfunction middleware3(next) {\n return function(ctx) {\n console.log('middleware3 before');\n next(ctx);\n console.log('middleware3 after');\n }\n}\n\nfunction compose(middlewares) {\n return function(ctx) {\n function dispatch(i) {\n if (i === middlewares.length) {\n return;\n }\n const middleware = middlewares[i];\n const next = dispatch.bind(null, i + 1);\n middleware(next)(ctx);\n }\n dispatch(0);\n }\n}\n\nconst middlewares = [middleware1, middleware2, middleware3];\nconst composed = compose(middlewares);\ncomposed({});\n```\n\n这个示例中有三个中间件函数 `middleware1`、`middleware2` 和 `middleware3`，它们都是接受一个 `next` 函数作为参数的高阶函数。当这个中间件被执行时，它将接受一个 `ctx` 对象作为参数，并且调用 `next(ctx)` 将请求传递给下一个中间件。\n\n`compose` 函数接受一个中间件函数数组作为参数，返回一个新的函数，这个函数可以将请求传递给第一个中间件函数。每个中间件函数都将接收一个 `next` 函数作为参数，并返回一个新的函数，这个新的函数将接收 `ctx` 对象作为参数，并且在调用 `next(ctx)` 之前和之后都会执行一些操作。当 `next(ctx)` 被调用时，请求将被传递到下一个中间件函数。\n\n在 `composed` 函数中，我们将一个空的 `ctx` 对象作为参数传递给第一个中间件函数。`dispatch` 函数递归地调用中间件数组中的每一个中间件函数，并将 `ctx` 对象和下一个中间件函数作为参数传递。当最后一个中间件函数完成处理时，递归调用结束，请求处理完成。\n",{"_54":879,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/279/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/279/timeline",{"_54":882,"_56":57,"_58":883,"_60":884,"_62":885,"_64":886,"_66":887,"_68":888,"_70":889,"_72":890,"_74":891,"_107":892,"_127":128,"_129":26,"_130":-5,"_131":901,"_133":902,"_155":213,"_149":904,"_151":905,"_154":-5,"_158":159,"_160":906,"_165":-5,"_166":907,"_168":908,"_180":910,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/264","https://api.github.com/repos/pro-collection/interview-question/issues/264/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/264/comments","https://api.github.com/repos/pro-collection/interview-question/issues/264/events","https://github.com/pro-collection/interview-question/issues/264",1659560115,"I_kwDOJGDC6c5i6uCz",264,"请实现一个 add 函数，满足以下功能",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[893,900],{"_66":894,"_68":895,"_54":896,"_113":897,"_115":898,"_117":26,"_118":899},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","JavaScript","A4D8FB","JavaScript 语法部分",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":903,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-04-08T15:42:13Z","2023-10-13T04:25:20Z",{"_162":148,"_163":148,"_164":148},"### 题目如下\r\n\r\n```\r\nadd(1).getValue(); \t// 1\r\nadd(1)(2).getValue(); \t// 3\r\nadd(1)(2)(3).getValue()； // 6\r\nadd(1)(2, 3).getValue(); // 6\r\nadd(1, 2)(3).getValue(); // 6\r\nadd(1, 2, 3).getValue(); // 6\r\n```\r\n\r\n### 解法\r\n\r\n\r\n```js\r\nfunction add(...args) {\r\n function innerAdd(...innerArgs) {\r\n args.push(...innerArgs);\r\n return innerAdd;\r\n }\r\n\r\n innerAdd.getValue = function() {\r\n return args.reduce((acc, curr) => acc + curr, 0);\r\n };\r\n\r\n return innerAdd;\r\n}\r\n\r\n\r\n// console.log(add(1)(2).getValue()); // 输出: 3\r\n```\r\n\r\n",{"_54":909,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/264/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/264/timeline",{"_54":912,"_56":57,"_58":913,"_60":914,"_62":915,"_64":916,"_66":917,"_68":918,"_70":919,"_72":920,"_74":921,"_107":922,"_127":128,"_129":26,"_130":-5,"_131":926,"_133":927,"_155":148,"_149":929,"_151":930,"_154":-5,"_158":159,"_160":931,"_165":-5,"_166":932,"_168":933,"_180":935,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/222","https://api.github.com/repos/pro-collection/interview-question/issues/222/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/222/comments","https://api.github.com/repos/pro-collection/interview-question/issues/222/events","https://github.com/pro-collection/interview-question/issues/222",1644202166,"I_kwDOJGDC6c5iAIi2",222,"给定两个数组，写一个方法来计算它们的交集？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[923,924,925],{"_66":894,"_68":895,"_54":896,"_113":897,"_115":898,"_117":26,"_118":899},{"_66":517,"_68":518,"_54":519,"_113":520,"_115":361,"_117":26,"_118":362},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":928,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-28T15:30:22Z","2023-10-13T04:26:01Z",{"_162":148,"_163":148,"_164":148},"可以使用 ES6 的 Set 数据结构来实现数组交集。\n\n首先，将一个数组转化为 Set，然后遍历另一个数组，将数组中存在于 Set 中的元素存入结果数组中。\n\n以下是一个示例代码：\n\n```javascript\nfunction intersection(nums1, nums2) {\n const set1 = new Set(nums1);\n const res = [];\n\n for (let num of nums2) {\n if (set1.has(num)) {\n res.push(num);\n }\n }\n\n return res;\n}\n```\n\n使用示例：\n\n```javascript\nconst nums1 = [1, 2, 2, 1];\nconst nums2 = [2, 2];\n\nconsole.log(intersection(nums1, nums2)); // [2]\n```\n\n该算法的时间复杂度为 O(m+n)，其中 m 和 n 分别为两个数组的长度。",{"_54":934,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/222/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/222/timeline",{"_54":937,"_56":57,"_58":938,"_60":939,"_62":940,"_64":941,"_66":942,"_68":943,"_70":944,"_72":945,"_74":946,"_107":947,"_127":128,"_129":26,"_130":-5,"_131":952,"_133":953,"_155":148,"_149":955,"_151":956,"_154":-5,"_158":159,"_160":957,"_165":-5,"_166":958,"_168":959,"_180":961,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/200","https://api.github.com/repos/pro-collection/interview-question/issues/200/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/200/comments","https://api.github.com/repos/pro-collection/interview-question/issues/200/events","https://github.com/pro-collection/interview-question/issues/200",1640861842,"I_kwDOJGDC6c5hzZCS",200,"手写订阅-发布模式",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[948,949,950,951],{"_66":894,"_68":895,"_54":896,"_113":897,"_115":898,"_117":26,"_118":899},{"_66":545,"_68":546,"_54":547,"_113":548,"_115":361,"_117":26,"_118":362},{"_66":465,"_68":466,"_54":467,"_113":468,"_115":361,"_117":26,"_118":362},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":954,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-26T10:56:48Z","2023-09-25T11:48:11Z",{"_162":148,"_163":148,"_164":148},"订阅-发布模式是一种常用的设计模式，它可以实现对象间的解耦，让它们不需要相互知道对方的存在，只需要关注自己需要订阅的事件即可。当一个对象的状态发生变化时，它可以发布一个事件通知其他对象，其他对象可以订阅该事件，当事件发生时得到通知并执行相应的处理。\n\n在 JavaScript 中，订阅-发布模式也被称为事件模型。事件模型由两个主要组件组成：事件触发器和事件监听器。事件触发器负责触发事件，而事件监听器则负责监听事件并执行相应的回调函数。\n\n下面是一个简单的实现订阅-发布模式的例子：\n\n```javascript\nclass EventEmitter {\n constructor() {\n this._events = {};\n }\n\n on(event, listener) {\n if (!this._events[event]) {\n this._events[event] = [];\n }\n this._events[event].push(listener);\n }\n\n emit(event, ...args) {\n if (this._events[event]) {\n this._events[event].forEach((listener) => listener(...args));\n }\n }\n\n off(event, listener) {\n if (this._events[event]) {\n this._events[event] = this._events[event].filter((l) => l !== listener);\n }\n }\n}\n```\n\n这个实现包括三个方法：\n\n* `on(event, listener)`：订阅事件，当事件被触发时执行监听器 `listener`；\n* `emit(event, ...args)`：触发事件，并将参数 `...args` 传递给监听器；\n* `off(event, listener)`：取消订阅事件，不再执行监听器 `listener`。\n\n使用方法如下：\n\n```javascript\nconst emitter = new EventEmitter();\n\n// 订阅事件\nemitter.on(\"event\", (arg1, arg2) => {\n console.log(`event: ${arg1}, ${arg2}`);\n});\n\n// 触发事件\nemitter.emit(\"event\", \"hello\", \"world\");\n\n// 取消订阅事件\nemitter.off(\"event\");\n```\n\n以上代码将输出：\n\n```csharp\ncsharpCopy codeevent: hello, world\n```\n\n订阅-发布模式在事件驱动的系统中非常常见，例如浏览器中的 DOM 事件、Node.js 中的异步 IO 事件等。",{"_54":960,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/200/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/200/timeline",{"_54":963,"_56":57,"_58":964,"_60":965,"_62":966,"_64":967,"_66":968,"_68":969,"_70":970,"_72":971,"_74":972,"_107":973,"_127":128,"_129":26,"_130":-5,"_131":978,"_133":979,"_155":148,"_149":981,"_151":982,"_154":-5,"_158":159,"_160":983,"_165":-5,"_166":984,"_168":985,"_180":987,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/199","https://api.github.com/repos/pro-collection/interview-question/issues/199/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/199/comments","https://api.github.com/repos/pro-collection/interview-question/issues/199/events","https://github.com/pro-collection/interview-question/issues/199",1640861383,"I_kwDOJGDC6c5hzY7H",199,"手写观察者模式",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[974,975,976,977],{"_66":894,"_68":895,"_54":896,"_113":897,"_115":898,"_117":26,"_118":899},{"_66":545,"_68":546,"_54":547,"_113":548,"_115":361,"_117":26,"_118":362},{"_66":465,"_68":466,"_54":467,"_113":468,"_115":361,"_117":26,"_118":362},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":980,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-26T10:55:18Z","2023-10-13T04:26:57Z",{"_162":148,"_163":148,"_164":148},"观察者模式（又称发布-订阅模式）是一种行为型设计模式，它定义了对象之间的一对多依赖关系，使得当一个对象的状态发生改变时，其相关的依赖对象都能够得到通知并被自动更新。\n\n在 JavaScript 中实现观察者模式，可以分为以下几个步骤：\n\n1. 创建一个主题对象（Subject），用来存储观察者对象，并提供添加、删除、通知观察者的接口。\n\n2. 创建观察者对象（Observer），它有一个 update 方法，用来接收主题对象的通知，并进行相应的处理。\n\n下面是一个简单的示例：\n\n```javascript\nclass Subject {\n constructor() {\n this.observers = [];\n }\n\n // 添加观察者\n addObserver(observer) {\n this.observers.push(observer);\n }\n\n // 删除观察者\n removeObserver(observer) {\n const index = this.observers.indexOf(observer);\n if (index !== -1) {\n this.observers.splice(index, 1);\n }\n }\n\n // 通知观察者\n notifyObservers() {\n this.observers.forEach(observer => observer.update());\n }\n}\n\nclass Observer {\n constructor(name) {\n this.name = name;\n }\n\n update() {\n console.log(`${this.name} received the notification.`);\n }\n}\n\nconst subject = new Subject();\nconst observer1 = new Observer('Observer 1');\nconst observer2 = new Observer('Observer 2');\n\nsubject.addObserver(observer1);\nsubject.addObserver(observer2);\n\nsubject.notifyObservers();\n// Output:\n// Observer 1 received the notification.\n// Observer 2 received the notification.\n```\n\n在这个示例中，Subject 是主题对象，Observer 是观察者对象。Subject 提供了添加、删除、通知观察者的接口，Observer 有一个 update 方法，用来接收主题对象的通知，并进行相应的处理。在使用时，我们可以通过调用 Subject 的 addObserver 方法，将 Observer 对象添加到主题对象中。当主题对象的状态发生改变时，我们可以调用 notifyObservers 方法，通知所有的观察者对象进行更新。\n\n以上仅是一个简单的示例，实际应用中还需要考虑更多的细节问题。",{"_54":986,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/199/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/199/timeline","pagination",{"_990":148,"_162":206},"value","actionData","errors"]