上拉加载和下拉刷新示例

\n \n

\n 加载中...\n

\n 下拉刷新\n

\n\n \n\n\n```\n\nJavaScript 代码（your_script.js）：\n```javascript\n// 获取相关元素\nvar content = document.getElementById('content');\nvar loading = document.getElementById('loading');\nvar refresh = document.getElementById('refresh');\n\nvar isRefreshing = false;\nvar isLoading = false;\n\n// 监听触摸事件\nvar startY = 0;\nvar moveY = 0;\ncontent.addEventListener('touchstart', function(event) {\n startY = event.touches[0].pageY;\n});\n\ncontent.addEventListener('touchmove', function(event) {\n moveY = event.touches[0].pageY;\n\n // 下拉刷新\n if (moveY - startY > 100 && !isRefreshing) {\n refresh.innerHTML = '释放刷新';\n }\n\n // 上拉加载\n var scrollTop = content.scrollTop;\n var scrollHeight = content.scrollHeight;\n var offsetHeight = content.offsetHeight;\n if (scrollTop + offsetHeight >= scrollHeight && !isLoading) {\n loading.style.display = 'block';\n }\n});\n\ncontent.addEventListener('touchend', function(event) {\n // 下拉刷新\n if (moveY - startY > 100 && !isRefreshing) {\n refresh.innerHTML = '刷新中...';\n simulateRefresh();\n }\n\n // 上拉加载\n var scrollTop = content.scrollTop;\n var scrollHeight = content.scrollHeight;\n var offsetHeight = content.offsetHeight;\n if (scrollTop + offsetHeight >= scrollHeight && !isLoading) {\n loading.style.display = 'block';\n simulateLoad();\n }\n\n // 重置状态\n startY = 0;\n moveY = 0;\n});\n\n// 模拟刷新\nfunction simulateRefresh() {\n isRefreshing = true;\n setTimeout(function() {\n // 刷新完成后的操作\n refresh.innerHTML = '刷新成功';\n isRefreshing = false;\n }, 2000);\n}\n\n// 模拟加载\nfunction simulateLoad() {\n isLoading = true;\n setTimeout(function() {\n // 加载完成后的操作\n loading.style.display = 'none';\n isLoading = false;\n }, 2000);\n}\n```\n\n上面的代码使用了`touchstart`、`touchmove`和`touchend`事件来监测用户的手势操作，实现了下拉刷新和上拉加载的功能。通过修改`refresh`和`loading`元\n\n素的内容和样式，可以实现相应的状态展示效果。\n\n",{"_58":499,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/446/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/446/timeline",{"_58":502,"_60":61,"_62":503,"_64":504,"_66":505,"_68":506,"_70":507,"_72":508,"_74":509,"_76":510,"_78":511,"_111":512,"_131":132,"_133":24,"_134":519,"_136":520,"_158":151,"_152":522,"_154":522,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":523,"_170":524,"_176":525,"_178":526,"_190":528,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/445","https://api.github.com/repos/pro-collection/interview-question/issues/445/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/445/comments","https://api.github.com/repos/pro-collection/interview-question/issues/445/events","https://github.com/pro-collection/interview-question/issues/445",1753005470,"I_kwDOJGDC6c5ofL2e",445,"执行上下文栈是什么【热度: 632】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[513,514],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":515,"_72":516,"_58":517,"_117":518,"_119":129,"_121":24,"_122":130},5312214934,"LA_kwDOJGDC6c8AAAABPKH3lg","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E6%98%93","网易",[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":521,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-12T15:24:14Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：执行上下文栈\n\n在JavaScript中，执行上下文栈（Execution Context Stack）是用于跟踪和管理函数执行的机制。每当JavaScript代码执行到一个函数时，就会创建一个执行上下文（Execution Context）并被推入执行上下文栈的顶部。当函数执行完毕后，执行上下文将从栈中弹出，控制权将返回给调用该函数的上下文。\n\n执行上下文栈遵循\"先进后出\"（Last-In-First-Out）的原则。也就是说，最后一个推入栈的执行上下文会被最先弹出。\n\n每个执行上下文都包含了以下三个重要的组成部分：\n\n1. 变量对象（Variable Object）：变量对象存储了函数的形参、函数声明、变量声明和作用域链等信息。\n\n2. 作用域链（Scope Chain）：作用域链是一个由当前执行上下文的变量对象和所有父级执行上下文的变量对象组成的链表结构。它用于变量查找的过程。\n\n3. this 值：this 值指定了当前执行上下文中的 this 关键字的指向。\n\n通过执行上下文栈，JavaScript引擎能够追踪到代码的执行位置，并根据当前执行上下文的环境来解析变量和执行函数。这种栈结构的管理方式使得JavaScript能够实现函数的嵌套调用和正确的变量作用域处理。\n",{"_58":527,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/445/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/445/timeline",{"_58":530,"_60":61,"_62":531,"_64":532,"_66":533,"_68":534,"_70":535,"_72":536,"_74":537,"_76":538,"_78":539,"_111":540,"_131":132,"_133":24,"_134":547,"_136":548,"_158":151,"_152":550,"_154":551,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":552,"_170":553,"_176":554,"_178":555,"_190":557,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/443","https://api.github.com/repos/pro-collection/interview-question/issues/443/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/443/comments","https://api.github.com/repos/pro-collection/interview-question/issues/443/events","https://github.com/pro-collection/interview-question/issues/443",1748240721,"I_kwDOJGDC6c5oNAlR",443,"深度遍历广度遍历的区别？【热度: 867】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[541,542],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":543,"_72":544,"_58":545,"_117":546,"_119":129,"_121":24,"_122":130},5597058003,"LA_kwDOJGDC6c8AAAABTZxT0w","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%BF%AB%E6%89%8B","快手",[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":549,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-08T16:09:02Z","2023-06-08T16:09:03Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：深度遍历广度遍历\n\n深度遍历（Depth-First Search，DFS）和广度遍历（Breadth-First Search，BFS）是两种常用的图遍历算法，用于访问和搜索图或树中的节点。它们在遍历顺序和搜索策略上有所不同。\n\n深度遍历（DFS）：\n- 深度遍历从一个节点开始，递归地访问该节点的子节点，直到达到最深的节点，然后回溯到上一级节点，继续访问其未访问的子节点。\n- 在深度遍历中，我们首先访问根节点，然后依次访问每个子节点。对于每个子节点，再依次访问其子节点，直到到达叶子节点。\n- 深度遍历可以通过递归或使用栈来实现。\n\n广度遍历（BFS）：\n- 广度遍历从一个节点开始，首先访问该节点的所有相邻节点，然后逐层访问其他节点，直到访问完所有节点。\n- 在广度遍历中，我们首先访问根节点，然后依次访问与根节点相邻的节点。然后，再依次访问与这些节点相邻的节点，以此类推，直到遍历完所有节点。\n- 广度遍历可以通过使用队列来实现，即先进先出（FIFO）的数据结构。\n\n区别：\n- 深度遍历优先访问节点的子节点，然后再访问子节点的子节点，以此类推，直到到达最深的节点。而广度遍历优先访问当前层级的所有节点，然后再访问下一层级的节点。\n- 在树或图结构中，深度遍历更适合查找目标节点在较深层级的情况，而广度遍历更适合查找目标节点在较浅层级的情况。\n- 深度遍历可能会在较深层级上陷入递归或栈的调用，而广度遍历则需要使用队列来存储和访问节点，因此占用的内存空间较大。\n- 深度遍历通常使用递归实现，而广度遍历通常使用迭代和队列实现。\n\n选择使用深度遍历还是广度遍历取决于具体的应用场景和需求。如果需要快速到达目标节点且目标节点位于较浅的层级，可以选择广度遍历。如果需要深度探索并处理树或图中的节点，可以选择深度遍历。\n",{"_58":556,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/443/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/443/timeline",{"_58":559,"_60":61,"_62":560,"_64":561,"_66":562,"_68":563,"_70":564,"_72":565,"_74":566,"_76":567,"_78":568,"_111":569,"_131":132,"_133":24,"_134":582,"_136":583,"_158":151,"_152":585,"_154":586,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":587,"_170":588,"_176":589,"_178":590,"_190":592,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/442","https://api.github.com/repos/pro-collection/interview-question/issues/442/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/442/comments","https://api.github.com/repos/pro-collection/interview-question/issues/442/events","https://github.com/pro-collection/interview-question/issues/442",1748222864,"I_kwDOJGDC6c5oM8OQ",442,"ajax、axios、fetch的区别【热度: 855】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[570,577],{"_70":571,"_72":572,"_58":573,"_117":574,"_119":575,"_121":24,"_122":576},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","网络","1A8829","web 网络相关",{"_70":578,"_72":579,"_58":580,"_117":581,"_119":129,"_121":24,"_122":130},5562711972,"LA_kwDOJGDC6c8AAAABS5A_pA","https://api.github.com/repos/pro-collection/interview-question/labels/Shopee","Shopee",[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":584,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-08T16:01:53Z","2023-06-08T16:01:54Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：ajax、axios、fetch、前端网络请求库\n\nAjax、Axios和Fetch都是用于进行HTTP请求的工具或技术，但它们在实现细节和功能方面有所不同。\n\n1. Ajax（Asynchronous JavaScript and XML）:\n - Ajax是一种用于在后台与服务器进行异步通信的技术。\n - Ajax使用XMLHttpRequest对象发送和接收数据，可以通过JavaScript来更新页面的局部内容，而无需刷新整个页面。\n - Ajax可以通过原生JavaScript编写，或者使用库如jQuery等来简化操作。\n\n2. Axios:\n - Axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js环境中使用。\n - Axios提供了更简洁、易用的API，支持请求和响应拦截、请求取消、全局配置等功能。\n - Axios可以处理请求的错误，并提供了更方便的错误处理机制。\n - Axios支持在浏览器中自动转换JSON数据，可以方便地发送JSON格式的请求和接收JSON格式的响应。\n\n3. Fetch:\n - Fetch是Web API提供的一种用于发送HTTP请求的新特性，主要用于替代XMLHttpRequest。\n - Fetch使用Promise来处理异步操作，提供了更简洁、灵活的API。\n - Fetch基于Promise设计，可以更好地处理请求和响应，并支持链式调用和异步操作。\n - Fetch支持跨域请求和对请求和响应进行拦截、转换等处理。\n\n区别：\n- Ajax是一种技术概念，而Axios和Fetch是具体的工具或技术实现。\n- Axios相比Ajax和Fetch具有更多的功能和便捷的API，支持更多的扩展和配置。\n- Fetch是基于Promise的新API，相对于Ajax和Axios更为现代化，并且支持更多的特性如跨域请求、拦截器等。\n- Ajax可以通过原生JavaScript或库来实现，Axios和Fetch是专门的库。\n- Axios和Fetch提供了更好的错误处理机制，而Ajax在错误处理方面相对简单。\n\n选择使用哪种工具或技术取决于具体的需求和项目情况。如果需要较低级别的控制和自定义配置，可以选择原生的Ajax或Fetch。而如果需要更丰富的功能和更方便的API，可以选择使用Axios或其他类似的库。\n",{"_58":591,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/442/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/442/timeline",{"_58":594,"_60":61,"_62":595,"_64":596,"_66":597,"_68":598,"_70":599,"_72":600,"_74":601,"_76":602,"_78":603,"_111":604,"_131":132,"_133":24,"_134":607,"_136":608,"_158":151,"_152":610,"_154":611,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":612,"_170":613,"_176":614,"_178":615,"_190":617,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/441","https://api.github.com/repos/pro-collection/interview-question/issues/441/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/441/comments","https://api.github.com/repos/pro-collection/interview-question/issues/441/events","https://github.com/pro-collection/interview-question/issues/441",1748212745,"I_kwDOJGDC6c5oM5wJ",441,"解释性语言和编译型语言的区别【热度: 858】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[605,606],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":543,"_72":544,"_58":545,"_117":546,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":609,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-08T15:58:05Z","2023-06-08T15:58:06Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：解释性语言和编译型语言\n\n解释性语言和编译型语言是两种不同的编程语言类型，它们在代码的执行方式和运行过程中的一些特点上存在区别。\n\n1. 编译型语言：\n - 编译型语言的代码在运行之前需要经过编译器的处理，将源代码一次性地转换成机器语言的可执行文件（通常是二进制文件）。\n - 编译器将源代码转换为目标代码的过程包括词法分析、语法分析、语义分析、优化和代码生成等步骤。\n - 在运行时，编译型语言的可执行文件直接在计算机上执行，无需再次进行翻译或解释。\n - 典型的编译型语言包括 C、C++、Java（虚拟机字节码编译）、Go等。\n\n2. 解释性语言：\n - 解释性语言的代码在运行时逐行被解释器解释执行，无需预先编译为可执行文件。\n - 解释器逐行读取源代码，将其解析并直接执行，将源代码翻译为机器指令并逐行执行。\n - 解释性语言的执行过程通常边解释边执行，每次运行都需要经过解释器的处理。\n - 典型的解释性语言包括 JavaScript、Python、Ruby、PHP等。\n\n区别：\n- 编译型语言在运行之前需要将代码转换为可执行文件，而解释性语言在运行时逐行解释执行。\n- 编译型语言的执行速度通常较快，因为代码已经被预先编译成机器语言，无需再进行解释。解释性语言的执行速度较慢，因为每次运行都需要经过解释器的处理。\n- 编译型语言一般需要根据目标平台进行编译，可执行文件通常与特定的操作系统和硬件相关。解释性语言通常是跨平台的，只需要相应的解释器即可运行。\n- 编译型语言在代码运行之前会进行全面的语法和类型检查，可以在编译过程中发现一些潜在的错误。解释性语言在运行时进行解释，错误可能会在运行过程中被发现。\n\n需要注意的是，实际上很多语言不是严格的编译型语言或解释性语言，而是在两者之间存在折中的方式。例如，Java 语言将源代码编译为字节码（中间形式），然后在虚拟机中解释执行。因此，这些概念并不是绝对的，语言的执行方式可能有所不同。\n",{"_58":616,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/441/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/441/timeline",{"_58":619,"_60":61,"_62":620,"_64":621,"_66":622,"_68":623,"_70":624,"_72":625,"_74":626,"_76":627,"_78":628,"_111":629,"_131":132,"_133":24,"_134":632,"_136":633,"_158":151,"_152":635,"_154":636,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":637,"_170":638,"_176":639,"_178":640,"_190":642,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/440","https://api.github.com/repos/pro-collection/interview-question/issues/440/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/440/comments","https://api.github.com/repos/pro-collection/interview-question/issues/440/events","https://github.com/pro-collection/interview-question/issues/440",1748196506,"I_kwDOJGDC6c5oM1ya",440,"use strict是什么? 它有什么用？【热度: 758】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[630,631],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":451,"_72":452,"_58":453,"_117":454,"_119":129,"_121":24,"_122":130},[],{"_58":235,"_68":236,"_62":237,"_70":238,"_72":239,"_74":196,"_76":240,"_122":241,"_146":634,"_148":243,"_150":151,"_131":132,"_152":244,"_154":245,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-08T15:51:48Z","2023-06-08T15:51:49Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：JS 编译指示、JS 严格模式\n\n`\"use strict\"` 是 JavaScript 中的一个编译指示（directive），用于启用严格模式（strict mode）。\n\n严格模式是 JavaScript 的一种执行模式，它增强了代码的健壮性、可维护性和安全性，并减少了一些常见的错误。启用严格模式后，JavaScript 引擎会执行更严格的语法检查，提供更好的错误检测和提示。\n\n使用 `\"use strict\"` 有以下几个特点和用途：\n\n1. 严格模式禁止使用一些不安全或不推荐的语法和行为，例如使用未声明的变量、删除变量或函数、对只读属性赋值等。它会抛出更多的错误，帮助开发者发现并修复潜在的问题。\n\n2. 严格模式禁止使用一些不严谨的语法解析和错误容忍行为，例如不允许在全局作用域中定义变量时省略 `var` 关键字。\n\n3. 严格模式对函数的处理更加严格，要求函数内部的 `this` 值为 `undefined`，而非在非严格模式下默认指向全局对象。\n\n4. 严格模式禁止使用一些具有歧义性的特性，例如禁止使用八进制字面量、重复的函数参数名。\n\n使用严格模式可以提高代码的质量和可靠性，并避免一些常见的错误。为了启用严格模式，只需在 JavaScript 文件或函数的顶部添加 `\"use strict\"` 即可。严格模式默认不启用，需要显式地指定。例如：\n\n```javascript\n\"use strict\";\n\n// 严格模式下的代码\n```\n\n需要注意的是，严格模式不兼容一些旧版本的 JavaScript 代码，可能会导致一些旧有的代码产生错误。因此，在使用严格模式之前，需要确保代码中不会出现与严格模式不兼容的语法和行为。\n",{"_58":641,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/440/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/440/timeline",{"_58":644,"_60":61,"_62":645,"_64":646,"_66":647,"_68":648,"_70":649,"_72":650,"_74":651,"_76":652,"_78":653,"_111":654,"_131":132,"_133":24,"_134":661,"_136":662,"_158":151,"_152":664,"_154":665,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":666,"_170":667,"_176":668,"_178":669,"_190":671,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/439","https://api.github.com/repos/pro-collection/interview-question/issues/439/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/439/comments","https://api.github.com/repos/pro-collection/interview-question/issues/439/events","https://github.com/pro-collection/interview-question/issues/439",1748184698,"I_kwDOJGDC6c5oMy56",439,"escape、encodeURI、encodeURIComponent 区别【热度: 367】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[655,656],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":657,"_72":658,"_58":659,"_117":660,"_119":129,"_121":24,"_122":130},5312231007,"LA_kwDOJGDC6c8AAAABPKI2Xw","https://api.github.com/repos/pro-collection/interview-question/labels/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4","阿里巴巴",[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":663,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-08T15:46:51Z","2023-09-29T12:42:05Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：js URL 编码解码\r\n\r\n在 JavaScript 中，`escape()`、`encodeURI()` 和 `encodeURIComponent()` 都是用于编码 URL 或字符串的函数，但它们有一些区别：\r\n\r\n1. `escape()` 函数用于编码字符串中的特殊字符，使其能够安全地传输。它对字符进行编码，包括非 ASCII 字符和特殊字符。但需要注意的是，`escape()` 不会编码 URL 中的保留字符（例如 `:/?#[]@!$&'()*+,;=`），它只会编码其他字符。\r\n```javascript\r\n// 输出：%48%65%6c%6c%6f%20%57%6f%72%6c%64%21\r\nconsole.log(escape(\"Hello World!\")); \r\n```\r\n\r\n2. `encodeURI()` 函数用于对整个 URL 进行编码，用于将 URL 中的特殊字符转换为可传输的形式。它不会编码 URL 中的保留字符和一些特殊字符（例如 `:/?#[]@!$&'()*+,;=`）。它主要用于编码整个 URL，而不是编码 URL 的参数值。\r\n```javascript\r\n// 输出：http://example.com/page.php?id=123\r\nconsole.log(encodeURI(\"http://example.com/page.php?id=123\")); \r\n```\r\n\r\n3. `encodeURIComponent()` 函数用于编码 URL 的参数值，它会对所有特殊字符进行编码，包括 URL 中的保留字符和其他特殊字符。它用于编码 URL 参数中的特殊字符，以确保它们在 URL 中的传输和解析过程中不会被误解。\r\n```javascript\r\n// 输出：Hello%20World%21\r\nconsole.log(encodeURIComponent(\"Hello World!\")); \r\n```\r\n\r\n需要注意的是，`escape()` 函数已被废弃，不推荐使用。在大多数情况下，建议使用 `encodeURI()` 或 `encodeURIComponent()` 函数进行 URL 编码。选择使用哪个函数取决于具体的需求，是否需要编码整个 URL 或只是其中的一部分（如参数值）。\r\n\r\n\r\n\r\n\r\n----------\r\n\r\n**补充**\r\n\r\n| 函数 | 编码范围 | 编码空格 | 编码特殊字符 | 可逆性 |\r\n| --------------------- | ----------------- | -------- | ------------ | ------ |\r\n| `escape` | ASCII 字符外的所有字符 | `+` | 是 | 是 |\r\n| `encodeURI` | URL 中的部分字符 | 否 | 否 | 是 |\r\n| `encodeURIComponent` | URL 中的所有字符 | `%20` | 是 | 是 |\r\n\r\n下面是对每个函数的详细解释：\r\n\r\n1. `escape` 函数用于编码字符串中的所有字符，包括非 ASCII 字符和某些特殊字符。它会将这些字符转换为 `%xx` 形式的十六进制转义序列，其中 `xx` 是字符的 ASCII 值的十六进制表示。它还会将空格编码为 `+` 符号。该函数可以对编码后的字符串进行反转义，以还原原始字符串。\r\n\r\n2. `encodeURI` 函数用于对 URL 中的某些字符进行编码，包括保留字符和一些特殊字符。它会将这些字符转换为 `%xx` 形式的十六进制转义序列，其中 `xx` 是字符的 ASCII 值的十六进制表示。与 `escape` 不同，`encodeURI` 不会编码空格。该函数可以对编码后的字符串进行反转义，以还原原始字符串。\r\n\r\n3. `encodeURIComponent` 函数用于对 URL 中所有字符进行编码，包括保留字符和特殊字符。它会将这些字符转换为 `%xx` 形式的十六进制转义序列，其中 `xx` 是字符的 ASCII 值的十六进制表示。与 `encodeURI` 不同，`encodeURIComponent` 会将空格编码为 `%20`。该函数可以对编码后的字符串进行反转义，以还原原始字符串。\r\n\r\n",{"_58":670,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/439/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/439/timeline",{"_58":673,"_60":61,"_62":674,"_64":675,"_66":676,"_68":677,"_70":678,"_72":679,"_74":680,"_76":681,"_78":682,"_111":683,"_131":132,"_133":24,"_134":686,"_136":687,"_158":689,"_152":690,"_154":691,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":692,"_170":693,"_176":694,"_178":695,"_190":697,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/438","https://api.github.com/repos/pro-collection/interview-question/issues/438/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/438/comments","https://api.github.com/repos/pro-collection/interview-question/issues/438/events","https://github.com/pro-collection/interview-question/issues/438",1748179206,"I_kwDOJGDC6c5oMxkG",438,"为什么函数的 arguments 参数是类数组而不是数组？【热度: 669】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[684,685],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":688,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},5,"2023-06-08T15:42:57Z","2025-02-21T15:34:45Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：arguments 参数、arguments 参数遍历\r\n\r\n在 JavaScript 中，函数的 `arguments` 参数被设计为类数组对象，而不是真正的数组。这是因为 `arguments` 对象包含了函数调用时传入的所有参数，包括未命名的参数。它提供了一种方便的方式来访问和操作这些参数。\r\n\r\n要遍历类数组对象，可以使用以下方法：\r\n\r\n1. 使用 for 循环和索引：通过使用普通的 for 循环和索引来遍历类数组对象。\r\n```javascript\r\nfunction sum() {\r\n for (let i = 0; i < arguments.length; i++) {\r\n console.log(arguments[i]);\r\n }\r\n}\r\n\r\nsum(1, 2, 3); // 输出：1 2 3\r\n```\r\n\r\n2. 使用 for...of 循环：`arguments` 是特殊的类数组，因为他实现了`[Symbol.iterator]`迭代器，故可以使用 for...of 循环\r\n```javascript\r\nfunction sum() {\r\n for (let arg of arguments) {\r\n console.log(arg);\r\n }\r\n}\r\n\r\nsum(1, 2, 3); // 输出：1 2 3\r\n```\r\n\r\n3. 将类数组对象转换为真正的数组后遍历：可以使用上述提到的类数组转换方法将类数组对象转换为真正的数组，然后使用数组的遍历方法进行遍历，如 `forEach()`、`map()` 等。\r\n```javascript\r\nfunction sum() {\r\n const args = Array.from(arguments);\r\n args.forEach(arg => {\r\n console.log(arg);\r\n });\r\n}\r\n\r\nsum(1, 2, 3); // 输出：1 2 3\r\n```\r\n\r\n这些方法都可以用于遍历类数组对象，根据需求选择适合的方式进行操作。\r\n",{"_58":696,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/438/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/438/timeline",{"_58":699,"_60":61,"_62":700,"_64":701,"_66":702,"_68":703,"_70":704,"_72":705,"_74":706,"_76":707,"_78":708,"_111":709,"_131":132,"_133":24,"_134":712,"_136":713,"_158":151,"_152":715,"_154":716,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":717,"_170":718,"_176":719,"_178":720,"_190":722,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/437","https://api.github.com/repos/pro-collection/interview-question/issues/437/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/437/comments","https://api.github.com/repos/pro-collection/interview-question/issues/437/events","https://github.com/pro-collection/interview-question/issues/437",1748174862,"I_kwDOJGDC6c5oMwgO",437,"类数组转换成数组的方法有哪些【热度: 1,094】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[710,711],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":387,"_72":388,"_58":389,"_117":390,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":714,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-08T15:40:21Z","2023-06-08T15:40:22Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：类数组对象转换为真正的数组\n\n有几种常见的方法可以将类数组对象转换为真正的数组：\n\n1. Array.from()：使用 Array.from() 方法可以将可迭代对象或类数组对象转换为数组。\n```javascript\nconst arrayLike = { 0: 'apple', 1: 'banana', length: 2 };\nconst array = Array.from(arrayLike);\nconsole.log(array); // ['apple', 'banana']\n```\n\n2. Array.prototype.slice.call()：通过调用 Array.prototype.slice() 方法，并将类数组对象作为参数传入，可以将其转换为数组。\n```javascript\nconst arrayLike = { 0: 'apple', 1: 'banana', length: 2 };\nconst array = Array.prototype.slice.call(arrayLike);\nconsole.log(array); // ['apple', 'banana']\n```\n\n3. Spread Operator（展开运算符）：使用展开运算符 `...` 可以将可迭代对象或类数组对象展开为数组。\n```javascript\nconst arrayLike = { 0: 'apple', 1: 'banana', length: 2 };\nconst array = [...arrayLike];\nconsole.log(array); // ['apple', 'banana']\n```\n\n这些方法都可以将类数组对象转换为真正的数组，使其具备数组的方法和属性。需要注意的是，类数组对象必须具有 length 属性和通过索引访问元素的能力才能成功转换为数组。\n",{"_58":721,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/437/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/437/timeline",{"_58":724,"_60":61,"_62":725,"_64":726,"_66":727,"_68":728,"_70":729,"_72":730,"_74":731,"_76":732,"_78":733,"_111":734,"_131":132,"_133":24,"_134":741,"_136":742,"_158":151,"_152":744,"_154":745,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":746,"_170":747,"_176":748,"_178":749,"_190":751,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/435","https://api.github.com/repos/pro-collection/interview-question/issues/435/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/435/comments","https://api.github.com/repos/pro-collection/interview-question/issues/435/events","https://github.com/pro-collection/interview-question/issues/435",1748160079,"I_kwDOJGDC6c5oMs5P",435,"什么是伪数组、什么是类数组【热度: 1,510】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[735,736],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":737,"_72":738,"_58":739,"_117":740,"_119":129,"_121":24,"_122":130},5342931240,"LA_kwDOJGDC6c8AAAABPnapKA","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BE%8E%E5%9B%A2","美团",[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":743,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-08T15:31:01Z","2023-06-08T15:31:15Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：伪数组、类数组\n\n伪数组（Array-like）和类数组（Array-like Object）都是描述一种类似数组的对象结构，它们在外观和行为上类似于数组，但实际上不是真正的数组。\n\n伪数组（Array-like）：\n- 伪数组是指具有类似数组的结构，但不具备数组的方法和属性的对象。\n- 伪数组对象通常拥有一个 length 属性，用于表示其元素的个数。\n- 伪数组对象可以通过索引访问元素，类似于数组的下标访问。\n- 伪数组对象不具备数组的方法，如 push、pop、slice 等。\n\n类数组（Array-like Object）：\n- 类数组是指具有类似数组的结构，但不是由 Array 构造函数创建的对象。\n- 类数组对象通常拥有一个 length 属性，用于表示其元素的个数。\n- 类数组对象可以通过索引访问元素，类似于数组的下标访问。\n- 类数组对象不具备数组的方法，如 push、pop、slice 等。\n\n示例：\n```javascript\n// 伪数组\nconst arrayLike = { 0: 'apple', 1: 'banana', length: 2 };\nconsole.log(arrayLike[0]); // 'apple'\nconsole.log(arrayLike.length); // 2\nconsole.log(arrayLike.push); // undefined\n\n// 类数组\nconst arrayLikeObject = document.querySelectorAll('div');\nconsole.log(arrayLikeObject[0]); // DOM元素\nconsole.log(arrayLikeObject.length); // 元素数量\nconsole.log(arrayLikeObject.push); // undefined\n```\n\n需要注意的是，伪数组和类数组虽然具有类似数组的结构，但它们没有继承自 Array 的方法和属性，因此无法直接使用数组的方法。如果需要使用数组的方法，可以将伪数组或类数组对象转换为真正的数组，例如通过 `Array.from()`、`Array.prototype.slice.call()` 或展开运算符 `...` 等方法进行转换。\n",{"_58":750,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/435/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/435/timeline",{"_58":753,"_60":61,"_62":754,"_64":755,"_66":756,"_68":757,"_70":758,"_72":759,"_74":760,"_76":761,"_78":762,"_111":763,"_131":132,"_133":24,"_134":766,"_136":767,"_158":151,"_152":769,"_154":770,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":771,"_170":772,"_176":773,"_178":774,"_190":776,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/434","https://api.github.com/repos/pro-collection/interview-question/issues/434/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/434/comments","https://api.github.com/repos/pro-collection/interview-question/issues/434/events","https://github.com/pro-collection/interview-question/issues/434",1748147976,"I_kwDOJGDC6c5oMp8I",434,"Object.is() 与比较操作符 “===”、“==” 有什么区别【热度: 1,425】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[764,765],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":486,"_72":487,"_58":488,"_117":489,"_119":129,"_121":24,"_122":130},[],{"_58":235,"_68":236,"_62":237,"_70":238,"_72":239,"_74":196,"_76":240,"_122":241,"_146":768,"_148":243,"_150":151,"_131":132,"_152":244,"_154":245,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-08T15:26:20Z","2023-06-08T15:26:50Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：Object.is()、js 相等比较\n\n`Object.is()` 方法和比较操作符 \"===\"、\"==\" 用于比较两个值的相等性，但它们在比较方式和行为上有一些区别。\n\n1. `Object.is()` 方法是严格相等比较，而 \"===\" 操作符也是严格相等比较，但 \"==\" 操作符是相等比较。\n - 严格相等比较（`===`）要求比较的两个值在类型和值上完全相同才会返回 `true`。\n - 相等比较（`==`）会进行类型转换，将两个值转换为相同类型后再进行比较。\n\n2. `Object.is()` 方法对于一些特殊的值比较更准确：\n - 对于 NaN 和 NaN 的比较，`Object.is(NaN, NaN)` 返回 `true`，而 `NaN === NaN` 返回 `false`。\n - 对于 +0 和 -0 的比较，`Object.is(+0, -0)` 返回 `false`，而 `+0 === -0` 返回 `true`。\n\n下面是一些示例：\n\n```javascript\nconsole.log(Object.is(1, 1)); // true\nconsole.log(Object.is('foo', 'foo')); // true\nconsole.log(Object.is(true, true)); // true\n\nconsole.log(Object.is(null, null)); // true\nconsole.log(Object.is(undefined, undefined)); // true\n\nconsole.log(Object.is(NaN, NaN)); // true\nconsole.log(NaN === NaN); // false\n\nconsole.log(Object.is(+0, -0)); // false\nconsole.log(+0 === -0); // true\n\nconsole.log(Object.is({}, {})); // false\nconsole.log({} === {}); // false\n```\n\n`Object.is()` 方法更精确地比较两个值的相等性，尤其是在处理一些特殊的值时，而 \"===\" 操作符和 \"==\" 操作符则具有不同的类型转换行为和比较规则。\n",{"_58":775,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/434/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/434/timeline",{"_58":778,"_60":61,"_62":779,"_64":780,"_66":781,"_68":782,"_70":783,"_72":784,"_74":785,"_76":786,"_78":787,"_111":788,"_131":132,"_133":24,"_134":790,"_136":791,"_158":151,"_152":793,"_154":794,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":795,"_170":796,"_176":797,"_178":798,"_190":800,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/433","https://api.github.com/repos/pro-collection/interview-question/issues/433/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/433/comments","https://api.github.com/repos/pro-collection/interview-question/issues/433/events","https://github.com/pro-collection/interview-question/issues/433",1748135789,"I_kwDOJGDC6c5oMm9t",433,"js 函数有默认值的时候，如果传递的参数是 undefined 那么会被默认值赋值吗？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[789],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":235,"_68":236,"_62":237,"_70":238,"_72":239,"_74":196,"_76":240,"_122":241,"_146":792,"_148":243,"_150":151,"_131":132,"_152":244,"_154":245,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-08T15:21:50Z","2023-06-08T15:26:59Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"是的，如果函数在调用时某个参数被传递为 `undefined`，那么它会被默认值赋值。\n\n当为函数的参数设置默认值时，只有当参数的值为 `undefined` 时才会生效。如果传递的参数为 `null`、空字符串 `''` 或者未提供参数，则默认值不会被应用。\n\n以下是一个示例：\n\n```javascript\nfunction greet(name = 'Guest') {\n console.log(`Hello, ${name}!`);\n}\n\ngreet('John'); // 输出: Hello, John!\ngreet(undefined); // 输出: Hello, Guest!\ngreet(); // 输出: Hello, Guest!\n```\n\n在上面的例子中，当参数 `name` 被传递为 `undefined` 或者未提供时，它会被默认值 `'Guest'` 赋值，从而在函数内部输出 `'Hello, Guest!'`。\n\n\n如果传递的参数为 `null`，默认值不会被应用。当函数的参数被显式传递为 `null` 时，它将被视为有效的值，不会触发默认值的赋值。\n\n以下是一个示例：\n\n```javascript\nfunction greet(name = 'Guest') {\n console.log(`Hello, ${name}!`);\n}\n\ngreet(null); // 输出: Hello, null!\n```\n\n在上面的例子中，参数 `name` 被显式传递为 `null`，因此默认值 `'Guest'` 不会被应用，而是使用了传递的 `null` 值。所以输出结果为 `'Hello, null!'`。\n",{"_58":799,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/433/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/433/timeline",{"_58":802,"_60":61,"_62":803,"_64":804,"_66":805,"_68":806,"_70":807,"_72":808,"_74":809,"_76":810,"_78":811,"_111":812,"_131":132,"_133":24,"_134":814,"_136":815,"_158":151,"_152":817,"_154":818,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":819,"_170":820,"_176":821,"_178":822,"_190":824,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/432","https://api.github.com/repos/pro-collection/interview-question/issues/432/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/432/comments","https://api.github.com/repos/pro-collection/interview-question/issues/432/events","https://github.com/pro-collection/interview-question/issues/432",1748086159,"I_kwDOJGDC6c5oMa2P",432,"typeof null 的结果是什么，为什么？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[813],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":816,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-08T14:59:38Z","2023-06-08T14:59:39Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"`typeof null` 的结果是 `\"object\"`。\n\n这是 JavaScript 中的一个历史遗留问题。在 JavaScript 最初的实现中，将 JavaScript 的值分为了几种类型，其中 `null` 被当作一个空对象指针。为了与其他对象类型区分开，`typeof null` 返回了 `\"object\"`。\n\n实际上，`null` 是一个表示空值的特殊值，它不是对象，也不是任何对象的实例。虽然 `typeof null` 返回了 `\"object\"`，但这并不表示 `null` 是对象的一种类型。\n\n由于这个历史遗留问题，判断一个值是否为 `null` 通常需要使用 `value === null` 进行比较，而不是依赖 `typeof` 运算符的结果。\n",{"_58":823,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/432/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/432/timeline",{"_58":826,"_60":61,"_62":827,"_64":828,"_66":829,"_68":830,"_70":831,"_72":832,"_74":833,"_76":834,"_78":835,"_111":836,"_131":132,"_133":24,"_134":839,"_136":840,"_158":196,"_152":842,"_154":843,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":844,"_170":845,"_176":846,"_178":847,"_190":849,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/431","https://api.github.com/repos/pro-collection/interview-question/issues/431/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/431/comments","https://api.github.com/repos/pro-collection/interview-question/issues/431/events","https://github.com/pro-collection/interview-question/issues/431",1748082889,"I_kwDOJGDC6c5oMaDJ",431,"判断数组的方式有哪些【热度: 509】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[837,838],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":515,"_72":516,"_58":517,"_117":518,"_119":129,"_121":24,"_122":130},[],{"_58":235,"_68":236,"_62":237,"_70":238,"_72":239,"_74":196,"_76":240,"_122":241,"_146":841,"_148":243,"_150":151,"_131":132,"_152":244,"_154":245,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-08T14:58:10Z","2024-06-26T10:02:38Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：js判断数组方法\n\n在 JavaScript 中，判断一个值是否为数组有多种方式，以下是几种常见的方法：\n\n1. `Array.isArray()`: 使用 `Array.isArray()` 方法可以判断一个值是否为数组。它是 ES5 中新增的方法，返回一个布尔值。\n```javascript\nconst arr = [1, 2, 3];\nconsole.log(Array.isArray(arr)); // true\n\nconst obj = { a: 1, b: 2 };\nconsole.log(Array.isArray(obj)); // false\n```\n\n2. `instanceof` 操作符：可以使用 `instanceof` 操作符检查一个对象是否是特定类的实例。对于数组，可以使用 `instanceof Array` 判断。\n```javascript\nconst arr = [1, 2, 3];\nconsole.log(arr instanceof Array); // true\n\nconst obj = { a: 1, b: 2 };\nconsole.log(obj instanceof Array); // false\n```\n\n3. `Array.prototype.isArray()`：可以通过 `Array.prototype.isArray.call()` 方法来判断一个值是否为数组。这种方式在某些特定情况下使用较多。\n```javascript\nconst arr = [1, 2, 3];\nconsole.log(Array.prototype.isArray.call(arr)); // true\n\nconst obj = { a: 1, b: 2 };\nconsole.log(Array.prototype.isArray.call(obj)); // false\n```\n\n4. `Object.prototype.toString()`：可以使用 `Object.prototype.toString.call()` 方法来获取一个值的类型信息，进而判断是否为数组。返回的结果是一个包含类型信息的字符串，例如 \"[object Array]\"。\n```javascript\nconst arr = [1, 2, 3];\nconsole.log(Object.prototype.toString.call(arr) === \"[object Array]\"); // true\n\nconst obj = { a: 1, b: 2 };\nconsole.log(Object.prototype.toString.call(obj) === \"[object Array]\"); // false\n```\n\n这些方法各有特点，根据实际需求选择合适的方法进行判断。通常推荐使用 `Array.isArray()` 方法来判断一个值是否为数组，因为它是专门用于判断数组的标准方法，并且在大多数现代浏览器中得到广泛支持。\n",{"_58":848,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/431/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/431/timeline",{"_58":851,"_60":61,"_62":852,"_64":853,"_66":854,"_68":855,"_70":856,"_72":857,"_74":858,"_76":859,"_78":860,"_111":861,"_131":132,"_133":24,"_134":864,"_136":865,"_158":151,"_152":867,"_154":868,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":869,"_170":870,"_176":871,"_178":872,"_190":874,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/429","https://api.github.com/repos/pro-collection/interview-question/issues/429/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/429/comments","https://api.github.com/repos/pro-collection/interview-question/issues/429/events","https://github.com/pro-collection/interview-question/issues/429",1746120511,"I_kwDOJGDC6c5oE68_",429,"html 中前缀为 data- 开头的元素属性是什么？【热度：903】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[862,863],{"_70":479,"_72":480,"_58":481,"_117":482,"_119":483,"_121":24,"_122":484},{"_70":578,"_72":579,"_58":580,"_117":581,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":866,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-07T15:05:07Z","2023-06-07T15:05:29Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"HTML 中前缀为 `data-` 开头的元素属性被称为自定义数据属性（Custom Data Attributes）或者数据属性（Data Attributes）。\n\n这些属性的命名以 `data-` 开头，后面可以跟上任意自定义的名称。这样的属性可以用来存储与元素相关的自定义数据，以便在 JavaScript 或 CSS 中进行访问和操作。\n\n自定义数据属性的命名应该遵循以下规则：\n- 属性名必须以 `data-` 开头。\n- 属性名可以包含任意`字母、数字、连字符（-）、下划线（_）和小数点（.）`。\n- 属性名不应该包含大写字母，因为 HTML 属性名是不区分大小写的。\n\n通过自定义数据属性，我们可以在 HTML 元素中嵌入自定义的数据，然后在 JavaScript 中使用 `getAttribute()` 方法或直接通过元素对象的 `dataset` 属性来访问这些数据。\n\n例如，在 HTML 中定义了一个自定义数据属性 `data-color=\"red\"`：\n```html\n

\n```\n\n在 JavaScript 中可以通过以下方式获取该自定义数据属性的值：\n```javascript\nconst myDiv = document.getElementById('myDiv');\nconst color = myDiv.getAttribute('data-color'); // 获取属性值为 \"red\"\nconst dataset = myDiv.dataset; // 获取包含所有自定义数据属性的对象 { color: \"red\" }\nconst colorValue = dataset.color; // 获取属性值为 \"red\"\n```\n\n通过自定义数据属性，我们可以将相关的数据绑定到 HTML 元素上，方便在 JavaScript 中进行处理和操作，增强了 HTML 和 JavaScript 之间的交互性。\n",{"_58":873,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/429/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/429/timeline",{"_58":876,"_60":61,"_62":877,"_64":878,"_66":879,"_68":880,"_70":881,"_72":882,"_74":883,"_76":884,"_78":885,"_111":886,"_131":132,"_133":24,"_134":888,"_136":889,"_158":151,"_152":901,"_154":902,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":903,"_170":904,"_176":905,"_178":906,"_190":908,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/428","https://api.github.com/repos/pro-collection/interview-question/issues/428/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/428/comments","https://api.github.com/repos/pro-collection/interview-question/issues/428/events","https://github.com/pro-collection/interview-question/issues/428",1746110251,"I_kwDOJGDC6c5oE4cr",428,"web 应用中如何对静态资源加载失败的场景做降级处理【热度: 1,093】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[887],{"_70":479,"_72":480,"_58":481,"_117":482,"_119":483,"_121":24,"_122":484},[],{"_58":890,"_68":891,"_62":892,"_70":893,"_72":894,"_74":895,"_76":896,"_122":897,"_146":898,"_148":262,"_150":151,"_131":132,"_152":899,"_154":900,"_156":-5,"_157":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/3","https://github.com/pro-collection/interview-question/milestone/3","https://api.github.com/repos/pro-collection/interview-question/milestones/3/labels",9124547,"MI_kwDOJGDC6c4AizrD",3,"高","高级别面试问题",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-06T15:00:27Z","2025-09-07T06:21:17Z","2023-06-07T15:00:35Z","2023-06-07T15:00:36Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：静态资源降级、静态资源加载失败\n\n在 Web 应用中，可以使用以下方法对静态资源加载进行降级处理，即在某个资源加载失败时使用备用的静态资源链接：\n\n1. 使用多个 CDN 链接：在 HTML 中使用多个静态资源链接，按照优先级顺序加载，如果其中一个链接加载失败，则尝试加载下一个链接。\n\n```html\n\n\n\n```\n\n在加载 JavaScript 脚本时，浏览器会按照给定的顺序尝试加载各个链接，如果某个链接加载失败，浏览器会自动尝试加载下一个链接。\n\n2. 使用备用资源路径：在 JavaScript 中使用备用的资源路径，当主要的资源路径加载失败时，切换到备用路径。\n\n```javascript\nvar script = document.createElement('script');\nscript.src = 'https://cdn.example.com/script.js';\nscript.onerror = function() {\n // 主要资源加载失败，切换到备用资源路径\n script.src = 'https://backup.example.com/script.js';\n};\ndocument.head.appendChild(script);\n```\n\n在加载 JavaScript 脚本时，可以通过监听 `onerror` 事件，在主要资源加载失败时切换到备用资源路径，保证资源的可靠加载。\n\n3. 使用动态加载和错误处理：使用 JavaScript 动态加载静态资源，并处理加载失败的情况。\n\n```javascript\nfunction loadScript(src, backupSrc) {\n return new Promise(function(resolve, reject) {\n var script = document.createElement('script');\n script.src = src;\n script.onload = resolve;\n script.onerror = function() {\n if (backupSrc) {\n // 主要资源加载失败，切换到备用资源路径\n script.src = backupSrc;\n } else {\n reject(new Error('Failed to load script: ' + src));\n }\n };\n document.head.appendChild(script);\n });\n}\n\n// 使用示例\nloadScript('https://cdn.example.com/script.js', 'https://backup.example.com/script.js')\n .then(function() {\n // 资源加载成功\n })\n .catch(function(error) {\n // 资源加载失败\n console.error(error);\n });\n```\n\n通过动态加载脚本的方式，可以在资源加载失败时切换到备用资源路径或处理加载错误。\n\n除了前面提到的方法外，还有以下一些降级处理的方法：\n\n4. 本地备份资源：在 Web 应用的服务器上存储备份的静态资源文件，并在主要资源加载失败时，从本地服务器上加载备份资源。这种方法需要在服务器上维护备份资源的更新和一致性。\n\n5. 使用浏览器缓存：如果静态资源被浏览器缓存，则在资源加载失败时，浏览器可以使用缓存中的资源。可以通过设置合适的缓存策略，例如设置资源的 Cache-Control 头字段，让浏览器缓存资源并在需要时从缓存中加载。\n\n6. 使用 Service Worker：使用 Service Worker 技术可以在浏览器中拦截网络请求，从而实现更高级的降级处理。当主要资源加载失败时，可以使用 Service Worker 拦截请求并返回备用资源，或者动态生成代替资源。\n\n7. 使用资源加载管理工具：使用像 Webpack 这样的资源加载管理工具，可以通过配置多个资源入口点和插件来实现资源加载的灵活控制。在资源加载失败时，可以通过配置自动切换到备用资源或通过插件实现自定义的降级逻辑。\n\n这些方法可以根据具体的需求和场景选择适合的降级处理策略。降级处理的目的是确保网页应用的正常运行，提高用户体验，并减少对单一资源的依赖性。\n\n",{"_58":907,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/428/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/428/timeline",{"_58":910,"_60":61,"_62":911,"_64":912,"_66":913,"_68":914,"_70":915,"_72":916,"_74":917,"_76":918,"_78":919,"_111":920,"_131":132,"_133":24,"_134":928,"_136":929,"_158":151,"_152":931,"_154":932,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":933,"_170":934,"_176":935,"_178":936,"_190":938,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/427","https://api.github.com/repos/pro-collection/interview-question/issues/427/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/427/comments","https://api.github.com/repos/pro-collection/interview-question/issues/427/events","https://github.com/pro-collection/interview-question/issues/427",1746096940,"I_kwDOJGDC6c5oE1Ms",427," 标签有何作用?",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[921],{"_70":922,"_72":923,"_58":924,"_117":925,"_119":926,"_121":24,"_122":927},5252299764,"LA_kwDOJGDC6c8AAAABOQ-79A","https://api.github.com/repos/pro-collection/interview-question/labels/%E6%B5%8F%E8%A7%88%E5%99%A8","浏览器","f9d0c4","浏览器相关知识点",[],{"_58":235,"_68":236,"_62":237,"_70":238,"_72":239,"_74":196,"_76":240,"_122":241,"_146":930,"_148":243,"_150":151,"_131":132,"_152":244,"_154":245,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-07T14:54:39Z","2023-06-07T14:54:40Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"`` 是 HTML5 的文档类型声明（Document Type Declaration），它的作用是告诉浏览器当前文档使用的是 HTML5 规范。\n\n具体来说，`` 的作用有以下几个方面：\n\n1. 指定文档类型：文档类型声明告诉浏览器当前文档所使用的 HTML 版本，即 HTML5。这样浏览器就可以按照 HTML5 的规范来解析和渲染文档。\n\n2. 规范浏览器行为：文档类型声明还可以影响浏览器的行为。HTML5 的文档类型声明告诉浏览器以标准模式（standards mode）来解析文档，以确保一致的行为和渲染结果。\n\n3. 提供更好的兼容性：使用 `` 可以确保文档在不同浏览器中具有一致的处理方式。不同的浏览器对不同版本的 HTML 有不同的处理方式，而使用 HTML5 的文档类型声明可以使浏览器以最新的标准模式来解析文档，提供更好的兼容性和一致性。\n\n总结来说，`` 是 HTML5 的文档类型声明，它告诉浏览器当前文档使用的是 HTML5 规范，以规范浏览器的行为，并提供更好的兼容性和一致性。在编写 HTML5 文档时，通常将 `` 放置在文档的开头作为文档类型声明。\n",{"_58":937,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/427/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/427/timeline",{"_58":940,"_60":61,"_62":941,"_64":942,"_66":943,"_68":944,"_70":945,"_72":946,"_74":947,"_76":948,"_78":949,"_111":950,"_131":132,"_133":24,"_134":952,"_136":953,"_158":151,"_152":955,"_154":956,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":957,"_170":958,"_176":959,"_178":960,"_190":962,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/426","https://api.github.com/repos/pro-collection/interview-question/issues/426/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/426/comments","https://api.github.com/repos/pro-collection/interview-question/issues/426/events","https://github.com/pro-collection/interview-question/issues/426",1746081844,"I_kwDOJGDC6c5oExg0",426,"HTML5 drag(拖拽) API 了解多少【热度: 324】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[951],{"_70":922,"_72":923,"_58":924,"_117":925,"_119":926,"_121":24,"_122":927},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":954,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-07T14:47:14Z","2023-06-07T14:47:15Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：drag 拖拽 api、拖拽 api\n\n### api\n\nHTML5 Drag API 提供了一组用于实现拖放操作的接口和事件。以下是 HTML5 Drag API 中常用的一些接口和事件：\n\n1. `draggable` 属性：将元素设置为可拖动。可以通过设置元素的 `draggable` 属性为 `true` 或 `false` 来控制元素是否可以被拖动。\n\n2. `ondragstart` 事件：拖动操作开始时触发的事件，通常在此事件中设置被拖动的数据类型和数据内容。\n\n3. `ondrag` 事件：拖动过程中持续触发的事件，可以在此事件中进行一些自定义的操作，如实时更新拖动元素的位置。\n\n4. `ondragend` 事件：拖动操作结束时触发的事件，通常在此事件中执行一些清理操作，如移除拖动时设置的样式。\n\n5. `ondragenter` 事件：拖动元素进入目标元素时触发的事件，可以在此事件中进行一些针对目标元素的操作，如改变目标元素的样式。\n\n6. `ondragleave` 事件：拖动元素离开目标元素时触发的事件，可以在此事件中进行一些清除或还原目标元素的操作。\n\n7. `ondragover` 事件：在目标元素上拖动时持续触发的事件，可以在此事件中阻止默认的拖放行为或执行一些自定义操作。\n\n8. `ondrop` 事件：在目标元素上释放拖动元素时触发的事件，通常在此事件中处理拖放操作，如获取拖放数据并执行相应的操作。\n\n以上是 HTML5 Drag API 中常用的接口和事件。通过使用这些接口和事件，可以实现灵活的拖拽功能并与其他元素进行交互。需要注意的是，拖放操作的实现还涉及到一些其他的 DOM 操作和事件处理。\n\n### 应用举例\n\n下面是一个使用 HTML5 Drag API 的简单示例，展示了如何实现拖拽功能：\n\n```html\n\n\n \n \n \n \n

Drag Me

Drop Here

\n\n \n \n\n```\n\n在上面的示例中，`.draggable` 类的元素被设置为可拖动（`draggable=\"true\"`），当开始拖动时，触发了 `dragstart` 事件，并设置了拖动数据。\n\n`.droppable` 类的元素作为目标元素，它监听了 `dragover` 事件以阻止默认的拖放行为，并在 `drop` 事件中获取拖放数据并执行相应的操作。\n\n通过以上代码，你可以在浏览器中看到一个红色的可拖动元素和一个蓝色的目标元素。你可以尝试将可拖动元素拖放到目标元素上，拖放完成后，目标元素的内容将会被设置为拖放的数据。\n",{"_58":961,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/426/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/426/timeline",{"_58":964,"_60":61,"_62":965,"_64":966,"_66":967,"_68":968,"_70":969,"_72":970,"_74":971,"_76":972,"_78":973,"_111":974,"_131":132,"_133":24,"_134":976,"_136":977,"_158":151,"_152":979,"_154":980,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":981,"_170":982,"_176":983,"_178":984,"_190":986,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/425","https://api.github.com/repos/pro-collection/interview-question/issues/425/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/425/comments","https://api.github.com/repos/pro-collection/interview-question/issues/425/events","https://github.com/pro-collection/interview-question/issues/425",1746070572,"I_kwDOJGDC6c5oEuws",425,"iframe 标签有那些优点和缺点？【热度: 411】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[975],{"_70":922,"_72":923,"_58":924,"_117":925,"_119":926,"_121":24,"_122":927},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":978,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-07T14:41:56Z","2023-06-07T14:41:57Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：iframe优点、iframe缺点、iframe应用\n\n`