正确处理空值

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个项目中,你将学习如何修复 vue-router-2.7.0 库中与处理 query 参数中的 null 值相关的一个漏洞。

👀 预览

修复后的vue路由器查询处理

🎯 任务

在这个项目中,你将学习:

  • 如何在 vue-router-2.7.0/src/util/route.js 文件中定位并理解 isObjectEqual 函数。
  • 如何修复 isObjectEqual 函数以正确处理 null 值。
  • 如何使用修复后的函数重新构建并发布 vue-router-2.7.0 项目。
  • 如何通过检查浏览器控制台中是否没有之前的错误消息来测试修复。

🏆 成果

完成这个项目后,你将能够:

  • 识别并修复第三方库中的漏洞。
  • 使用 vue-router-2.7.0 库并理解其内部函数。
  • 在进行代码更改后重新构建并发布项目。
  • 通过检查浏览器控制台中的错误消息来测试修复。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/ToolsandEnvironmentGroup(["`Tools and Environment`"]) javascript(("`JavaScript`")) -.-> javascript/NetworkingGroup(["`Networking`"]) javascript/BasicConceptsGroup -.-> javascript/functions("`Functions`") javascript/BasicConceptsGroup -.-> javascript/obj_manip("`Object Manipulation`") javascript/AdvancedConceptsGroup -.-> javascript/error_handle("`Error Handling`") javascript/ToolsandEnvironmentGroup -.-> javascript/debugging("`Debugging`") javascript/NetworkingGroup -.-> javascript/http_req("`HTTP Requests`") subgraph Lab Skills javascript/functions -.-> lab-445749{{"`正确处理空值`"}} javascript/obj_manip -.-> lab-445749{{"`正确处理空值`"}} javascript/error_handle -.-> lab-445749{{"`正确处理空值`"}} javascript/debugging -.-> lab-445749{{"`正确处理空值`"}} javascript/http_req -.-> lab-445749{{"`正确处理空值`"}} end

修复 isObjectEqual 函数

首先,查看左侧文件的目录结构如下:

├── vue-router-2.7.0
├── vue.min.js
└── index.html

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来,在虚拟机顶部打开 “Web 8080” 并手动刷新,点击 “test” 并在浏览器控制台中打开 Console 选项,你会看到两条错误消息,分别是 TypeError: Cannot convert undefined or null to objectUncaught TypeError: Cannot convert undefined or null to object

修复前

在这一步中,你将学习如何修复 vue-router-2.7.0/src/util/route.js 文件中的 isObjectEqual 函数,以正确处理 null 值。

  1. 打开 vue-router-2.7.0/src/util/route.js 文件。
  2. 找到 isObjectEqual 函数:
function isObjectEqual(a = {}, b = {}): boolean {
  const aKeys = Object.keys(a);
  const bKeys = Object.keys(b);
  if (aKeys.length!== bKeys.length) {
    return false;
  }
  return aKeys.every((key) => {
    const aVal = a[key];
    const bVal = b[key];
    // 检查嵌套相等性
    if (typeof aVal === "object" && typeof bVal === "object") {
      return isObjectEqual(aVal, bVal);
    }
    return String(aVal) === String(bVal);
  });
}
  1. 更新函数以正确处理 null 值:
function isObjectEqual(a = {}, b = {}): boolean {
  if (!a ||!b) return a === b;
  const aKeys = Object.keys(a);
  const bKeys = Object.keys(b);
  if (aKeys.length!== bKeys.length) {
    return false;
  }
  return aKeys.every((key) => {
    const aVal = a[key];
    const bVal = b[key];
    // 检查嵌套相等性
    if (typeof aVal === "object" && typeof bVal === "object") {
      return isObjectEqual(aVal, bVal);
    }
    return String(aVal) === String(bVal);
  });
}

更改内容如下:

  • 添加了一个条件来检查 ab 是否为 nullundefined。如果其中任何一个是 nullundefined,函数将返回 a === b
  • 这确保了函数能够正确处理 query 参数中的 null 值。

重新构建并测试项目

在这一步中,你将在修复 isObjectEqual 函数之后重新构建并测试 vue-router-2.7.0 项目。

  1. 在终端中,导航到 vue-router-2.7.0 目录。
  2. 运行命令 npm install 来安装依赖项。这个过程可能需要一些时间,请耐心等待。(如果长时间卡住,请按 Ctrl+C 终止进程,然后再次运行此命令。)
  3. 安装完成后,运行命令 npm run build 来重新构建并发布项目。这将生成带有修复后的 isObjectEqual 函数的更新后的 vue-router-2.7.0 库。
  4. 返回网页并刷新页面。
  5. 点击 “test” 并在 Console 标签页中打开控制台进行检查,你将不再看到上述错误消息。

如果错误消息消失,则修复成功。你已完成该项目!

修复后
✨ 查看解决方案并练习

总结

恭喜你!你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。

您可能感兴趣的其他 JavaScript 教程