\n \n\n```\n\n在这个例子中，`.child1`设置了`z-index: 999`，`.child2`设置了`z-index: 0`，并且它们都在一个具有`z-index: 1`的父元素中。由于父元素创建了一个堆叠上下文，`.child1`和`.child2`会在这个堆叠上下文中按照它们的`z-index`值进行堆叠，所以`.child1`会显示在`.child2`之上。\n\n但是，如果将父元素的`z-index`值设置为 0，或者去除父元素的定位属性，那么`.child1`和`.child2`的堆叠顺序可能会发生变化，具体取决于浏览器的默认行为和 HTML 结构的顺序。\n",{"_54":862,"_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/1037/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1037/timeline",{"_54":865,"_56":57,"_58":866,"_60":867,"_62":868,"_64":869,"_66":870,"_68":871,"_70":872,"_72":873,"_74":874,"_107":875,"_127":128,"_129":26,"_130":-5,"_131":877,"_133":878,"_155":148,"_149":880,"_151":881,"_154":-5,"_158":159,"_160":882,"_165":-5,"_166":883,"_168":884,"_180":886,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/1036","https://api.github.com/repos/pro-collection/interview-question/issues/1036/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1036/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1036/events","https://github.com/pro-collection/interview-question/issues/1036",2615639918,"I_kwDOJGDC6c6b539u",1036,"Object.keys 与 Object.getOwnPropertyNames() 有何区别【热度: 210】",{"_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},[876],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":439,"_64":440,"_58":441,"_66":442,"_68":443,"_70":185,"_72":444,"_118":445,"_143":879,"_145":447,"_147":148,"_127":128,"_149":448,"_151":449,"_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-26T07:50:57Z","2024-10-26T07:50:58Z",{"_162":148,"_163":148,"_164":148},"`Object.keys()`和`Object.getOwnPropertyNames()`都是用于获取对象自身属性名的方法，但它们之间存在一些区别：\n\n**一、返回值类型**\n\n1. `Object.keys()`：\n\n - 返回一个由对象自身可枚举属性名组成的数组。\n - 可枚举属性是指那些可以通过`for...in`循环遍历到的属性。\n\n2. `Object.getOwnPropertyNames()`：\n - 返回一个由对象自身所有属性名组成的数组，无论属性是否可枚举。\n\n**二、可枚举性处理**\n\n1. `Object.keys()`：\n\n - 只返回可枚举属性的名称。如果一个属性被设置为不可枚举，它将不会出现在`Object.keys()`的返回结果中。\n - 例如，使用`Object.defineProperty()`定义的不可枚举属性不会被包含在`Object.keys()`的结果中。\n\n2. `Object.getOwnPropertyNames()`：\n - 返回所有属性的名称，包括可枚举和不可枚举的属性。\n - 这使得它在需要获取对象的所有属性，无论其可枚举性如何时非常有用。\n\n**三、示例**\n\n1. 以下是一个使用`Object.keys()`和`Object.getOwnPropertyNames()`的示例：\n\n```javascript\nconst obj = {\n property1: \"value1\",\n property2: \"value2\",\n};\n\nObject.defineProperty(obj, \"nonEnumerableProperty\", {\n value: \"value3\",\n enumerable: false,\n});\n\nconsole.log(Object.keys(obj)); // ['property1', 'property2']\nconsole.log(Object.getOwnPropertyNames(obj)); // ['property1', 'property2', 'nonEnumerableProperty']\n```\n\n在这个例子中，`Object.keys()`只返回了可枚举的属性`property1`和`property2`，而`Object.getOwnPropertyNames()`返回了所有属性，包括不可枚举的`nonEnumerableProperty`。\n",{"_54":885,"_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/1036/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1036/timeline",{"_54":888,"_56":57,"_58":889,"_60":890,"_62":891,"_64":892,"_66":893,"_68":894,"_70":895,"_72":896,"_74":897,"_107":898,"_127":128,"_129":26,"_130":-5,"_131":900,"_133":901,"_155":148,"_149":903,"_151":903,"_154":-5,"_158":159,"_160":904,"_165":-5,"_166":905,"_168":906,"_180":908,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/1035","https://api.github.com/repos/pro-collection/interview-question/issues/1035/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1035/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1035/events","https://github.com/pro-collection/interview-question/issues/1035",2615638526,"I_kwDOJGDC6c6b53n-",1035,"事件委托是什么概念，有何适用场景【热度: 265】",{"_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},[899],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":439,"_64":440,"_58":441,"_66":442,"_68":443,"_70":185,"_72":444,"_118":445,"_143":902,"_145":447,"_147":148,"_127":128,"_149":448,"_151":449,"_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-26T07:48:24Z",{"_162":148,"_163":148,"_164":148},"**关键词**：事件委托概念\n\n事件委托（Event Delegation）是一种利用事件冒泡机制，将事件处理程序添加到父元素上，通过判断事件的目标元素来处理子元素事件的方法。\n\n**一、事件委托的原理**\n\n当一个事件在 DOM 元素上触发时，它会从最具体的目标元素开始向上冒泡，经过它的祖先元素，直到到达文档的根元素。事件委托利用这个特性，将事件处理程序添加到一个较高层次的父元素上，而不是为每个子元素单独添加事件处理程序。当事件在子元素上触发时，它会冒泡到父元素，父元素上的事件处理程序可以通过检查事件的目标元素来确定是否应该处理该事件。\n\n**二、事件委托的适用场景**\n\n1. 动态生成的元素\n\n - 当页面中有大量动态生成的元素时，如果为每个元素单独添加事件处理程序，会非常低效，因为每次生成新元素都需要重新添加事件处理程序。而使用事件委托，只需要在父元素上添加一个事件处理程序，就可以处理所有子元素的事件，无论子元素是在页面加载时就存在还是在后续动态生成的。\n - 例如，在一个列表中，当用户点击列表项时需要执行某个操作。如果列表项是动态生成的，使用事件委托可以避免为每个列表项单独添加点击事件处理程序。\n\n2. 减少内存占用和提高性能\n\n - 为大量元素添加事件处理程序会占用较多的内存，并且可能会影响页面的性能。事件委托可以减少事件处理程序的数量，从而降低内存占用和提高性能。\n - 例如，在一个包含大量按钮的页面中，如果为每个按钮都添加一个点击事件处理程序，会消耗较多的内存。而使用事件委托，只需要在按钮的父元素上添加一个点击事件处理程序，就可以处理所有按钮的点击事件。\n\n3. 统一处理相似元素的事件\n - 当有多个相似的元素需要处理相同的事件时，可以使用事件委托将它们的事件处理程序统一添加到一个父元素上，这样可以简化代码并提高可维护性。\n - 例如，在一个表格中，所有的单元格都需要处理点击事件，可以将点击事件处理程序添加到表格元素上，然后根据点击的目标单元格进行相应的处理。\n",{"_54":907,"_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/1035/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1035/timeline",{"_54":910,"_56":57,"_58":911,"_60":912,"_62":913,"_64":914,"_66":915,"_68":916,"_70":917,"_72":918,"_74":919,"_107":920,"_127":128,"_129":26,"_130":-5,"_131":922,"_133":923,"_155":148,"_149":925,"_151":925,"_154":-5,"_158":159,"_160":926,"_165":-5,"_166":927,"_168":928,"_180":930,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/1034","https://api.github.com/repos/pro-collection/interview-question/issues/1034/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1034/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1034/events","https://github.com/pro-collection/interview-question/issues/1034",2615637610,"I_kwDOJGDC6c6b53Zq",1034,"Javascript 数组中有那些方法可以改变自身，那些不可以【热度: 307】",{"_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},[921],{"_66":409,"_68":410,"_54":411,"_113":412,"_115":413,"_117":26,"_118":414},[],{"_54":439,"_64":440,"_58":441,"_66":442,"_68":443,"_70":185,"_72":444,"_118":445,"_143":924,"_145":447,"_147":148,"_127":128,"_149":448,"_151":449,"_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-26T07:46:41Z",{"_162":148,"_163":148,"_164":148},"**关键词**：数组改变自身\n\n在 JavaScript 中，数组的方法可以分为两类：改变自身的方法和不改变自身的方法。\n\n**一、改变自身的方法**\n\n1. `push()`：在数组末尾添加一个或多个元素，并返回新的数组长度。\n2. `pop()`：删除数组的最后一个元素，并返回这个元素。\n3. `shift()`：删除数组的第一个元素，并返回这个元素。\n4. `unshift()`：在数组开头添加一个或多个元素，并返回新的数组长度。\n5. `splice()`：通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。\n6. `sort()`：对数组的元素进行排序，并返回排序后的数组。默认按照字符串编码的顺序进行排序。\n7. `reverse()`：反转数组中的元素顺序，并返回反转后的数组。\n\n**二、不改变自身的方法**\n\n1. `concat()`：返回一个新数组，这个新数组是由调用该方法的数组和其他数组或值连接而成。\n2. `slice()`：返回一个新的数组，包含从原数组中提取的元素。可以指定起始位置和结束位置（不包括结束位置的元素）。\n3. `indexOf()`：返回在数组中首次出现的指定元素的索引，如果不存在则返回 -1。\n4. `lastIndexOf()`：返回在数组中最后一次出现的指定元素的索引，如果不存在则返回 -1。\n5. `includes()`：判断数组是否包含指定的元素，返回一个布尔值。\n6. `join()`：将数组的所有元素连接成一个字符串，并返回这个字符串。可以指定连接元素的分隔符。\n",{"_54":929,"_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/1034/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1034/timeline",{"_54":932,"_56":57,"_58":933,"_60":934,"_62":935,"_64":936,"_66":937,"_68":938,"_70":939,"_72":940,"_74":941,"_107":942,"_127":128,"_129":26,"_130":-5,"_131":944,"_133":945,"_155":148,"_149":947,"_151":948,"_154":-5,"_158":159,"_160":949,"_165":-5,"_166":950,"_168":951,"_180":953,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/1033","https://api.github.com/repos/pro-collection/interview-question/issues/1033/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1033/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1033/events","https://github.com/pro-collection/interview-question/issues/1033",2615635101,"I_kwDOJGDC6c6b52yd",1033,"如何保证项目质量【热度: 784】",{"_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},[943],{"_66":409,"_68":410,"_54":411,"_113":412,"_115":413,"_117":26,"_118":414},[],{"_54":354,"_64":355,"_58":356,"_66":357,"_68":358,"_70":359,"_72":360,"_118":361,"_143":946,"_145":363,"_147":148,"_127":128,"_149":364,"_151":365,"_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-26T07:42:18Z","2024-10-26T07:43:11Z",{"_162":148,"_163":148,"_164":148},"**关键词**：项目质量保证\n\n> 作者备注\n>\n> 这个话题是一个开放性话题，只要合理，怎么都没有错。\n>\n> 以下是 GPT 作答，仅供参考\n\n要保证项目质量，可以从以下几个方面入手：\n\n**一、需求分析与规划**\n\n1. 明确需求：\n\n - 与项目相关方（如客户、产品经理、团队成员等）进行充分沟通，确保对项目的目标、功能需求、性能需求、用户体验要求等有清晰的理解。\n - 形成详细的需求文档，作为项目开发的依据。\n\n2. 项目规划：\n - 制定合理的项目计划，包括项目时间表、里程碑、任务分配等。确保项目进度合理，各个阶段的任务明确。\n - 考虑风险因素，制定风险应对计划，提前预防和应对可能出现的问题。\n\n**二、设计与开发阶段**\n\n1. 良好的架构设计：\n\n - 设计合理的软件架构，确保系统的可扩展性、可维护性和性能。\n - 遵循设计模式和最佳实践，提高代码的质量和可读性。\n\n2. 代码规范：\n\n - 制定统一的代码规范，包括命名规范、代码格式、注释规范等。确保团队成员编写的代码风格一致，易于理解和维护。\n - 可以使用工具（如 ESLint、Prettier 等）来自动检查和格式化代码。\n\n3. 测试驱动开发（TDD）：\n\n - 采用 TDD 的方法，先编写测试用例，再编写实现代码。确保代码的功能正确性，同时提高代码的可测试性。\n - 包括单元测试、集成测试、端到端测试等不同层次的测试，全面覆盖项目的各个部分。\n\n4. 代码审查：\n - 进行代码审查，让团队成员互相检查代码。可以发现潜在的问题、提高代码质量，并促进知识共享和团队协作。\n - 可以使用工具（如 GitHub Pull Requests、Gerrit 等）来进行代码审查流程管理。\n\n**三、质量控制与保证**\n\n1. 持续集成与持续部署（CI/CD）：\n\n - 建立 CI/CD 流程，自动构建、测试和部署项目。确保每次代码提交都能经过严格的测试，及时发现问题并修复。\n - 使用工具（如 Jenkins、GitLab CI/CD、GitHub Actions 等）来实现 CI/CD。\n\n2. 性能测试：\n\n - 对项目进行性能测试，包括负载测试、压力测试等。确保系统在不同负载情况下的性能表现符合要求。\n - 使用工具（如 JMeter、LoadRunner 等）进行性能测试。\n\n3. 安全测试：\n\n - 进行安全测试，包括漏洞扫描、渗透测试等。确保系统的安全性，防止潜在的安全漏洞被攻击。\n - 可以使用工具（如 OWASP ZAP、Nessus 等）进行安全测试。\n\n4. 用户验收测试（UAT）：\n - 在项目上线前，进行用户验收测试，让实际用户对系统进行测试和反馈。确保系统满足用户的需求和期望。\n\n**四、项目管理与团队协作**\n\n1. 项目管理：\n\n - 有效的项目管理是保证项目质量的关键。使用项目管理工具（如 JIRA、Trello 等）来跟踪项目进度、任务分配和问题解决。\n - 定期召开项目会议，及时沟通项目进展、问题和解决方案。\n\n2. 团队协作：\n - 建立良好的团队协作氛围，鼓励团队成员之间的沟通和合作。\n - 进行团队培训和知识分享，提高团队成员的技术水平和综合素质。\n\n**五、持续改进**\n\n1. 收集反馈：\n\n - 在项目上线后，收集用户反馈和系统运行数据。了解用户的使用体验和系统的性能表现，发现潜在的问题和改进点。\n\n2. 问题解决与改进：\n - 及时解决用户反馈的问题，并根据反馈和数据分析进行系统的改进和优化。\n - 建立问题跟踪和改进机制，确保问题得到有效解决和持续改进。\n",{"_54":952,"_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/1033/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1033/timeline","pagination",{"_956":140,"_162":957},"value",32,"actionData","errors"]