如何修复JavaScript中的 “uncaught typeerror: cannot read property” 错误
错误是学习和使用任何的核心部分。错误信息往往能帮助你理解代码中的某个地方出了问题。
有些错误信息简单明了、易于理解，而有些错误信息则可能让人一头雾水。
在本教程中，我们将讨论最常见的 JavaScript 错误之一 – “uncaught typeerror: cannot read property”（未捕获类型错误：无法读取属性）错误。
在本教程结束时，您应该明白 “uncaught typeerror: cannot read property”（未捕获的类型错误：无法读取属性）的含义、常见原因以及修复 *** 。
JavaScript 中的 “uncaught typeerror: cannot read property “是什么意思？
未捕获类型错误：无法读取属性” 错误主要发生在尝试使用或访问 undefined 的变量时。在使用普通 JavaScript 或任何 时，都可能出现这种错误。
您可以使用各种开发工具（如 Chrome 浏览器开发工具）来拦截错误、测试代码等，从而在编码时轻松检测错误。
如何修复 JavaScript 中的 “未捕获类型错误：无法读取属性” 错误
在接下来的章节中，我们将重点介绍导致 “uncaught typeerror: cannot read property” 错误的一些原因，以及如何使用代码示例来修复它们。
访问值为未定义的对象属性
在本节中，我们将讨论导致 中出现 “uncaught typeerror: cannot read property”（未捕获类型错误：无法读取属性）错误的可能原因之一。这与访问未定义的对象属性有关。
下面是一个示例：
let person;
在上面的代码中，我们创建了一个名为 person 的变量。这样做的目的是使这个变量成为一个具有 name, age, hobby等属性的对象。
如果你忘记创建这些属性，那么当你试图访问它们时就会出错。也就是说：
let person; conSOLe.log(person.name); // Uncaught TypeError: Cannot read properties of undefined (reading 'name')
如上图所示，我们尝试访问 name 属性，但该属性并不存在，因此出现了错误提示：Uncaught TypeError: Cannot read properties of undefined（reading “name”）。
任何人都可能遇到这种情况，因为你可能会忘记为对象创建/添加属性。
让我们继续为对象添加一些属性来修复错误：
let person = {
name: "John",
age: 200,
hobby: "coding"
}
console.log(person.name);
// John
在上面的代码中，我们添加了 name 属性，因此当你尝试访问它时，返回的值是 “John”。
不存在
就像我们在上一节中看到的对象一样，如果尝试访问数组中尚未初始化的元素，也会出现 “uncaught typeerror: cannot read property”（未捕获类型错误：无法读取属性）错误。
下面是一个例子：
let arr; console.log(arr[0]); // Uncaught TypeError: Cannot read properties of undefined (reading '0')
在上面的示例中，我们尝试访问名为 arr 的数组的之一个元素。
数组已经声明，但尚未初始化 – 这意味着还没有元素被分配给它。
为了解决这个问题，我们要在访问数组之前将元素添加到数组中。也就是说
let arr = [2,4,6,8] console.log(arr[0]); // 2
访问不存在的 DOM 元素
在 JavaScript 中使用文档对象模型（DOM）时，您可能会遇到 “uncaught typeerror: cannot read property”（未捕获类型错误：无法读取属性）。
出现这种情况的原因有很多，例如在引用 DOM 元素时拼写错误、访问不存在的元素或在 DOM 加载之前访问元素（我们将在下一节讨论这个问题）。
在本节中，您将看到一个示例，该示例会因访问不存在的 DOM 元素而抛出 “uncaught typeerror: cannot read property”（未捕获类型错误：无法读取属性）错误。
下面是 HTML 代码：
<!DOCTYPE html> <html> <head> <title>Error Tutorial</title> </head> <body> <h1 id="content">Hello World!</h1> <script src="app.js"></script> </body> </html>
在上面的代码中，我们创建了一个基本的 HTML 文档，其中包含一个 ID 为 “content” 的 h1 元素。
下面是 JavaScript 代码：
let content = document.getElementById("constent");
console.log(content.textContent);
// Uncaught TypeError: Cannot read properties of null (reading 'textContent');
上面的代码引发了 “uncaught typeerror: cannot read property”（未捕获类型错误：无法读取属性）错误，尽管我们看起来做得一切正常。
我们很容易就会忽略引发这个错误的原因。出现错误的原因是我们在引用 h1 元素的 ID 时拼写的是 “constent” 而不是 “content”。
也就是说，是 document.getElementById("constent"); 而不是 document.getElementById("content"); 。
如果您尝试引用一个尚未在 DOM 中创建的 ID 或类名，也会出现同样的错误。
要解决这个问题，只需检查拼写错误或确保所引用的元素确实存在于 DOM 中即可。
将脚本元素置于 Body 标签内其他 DOM 元素之上
script 元素的位置决定了 JavaScript 代码在浏览器中的执行方式。
如果将 script 元素放在 HTML 文档正文中其他元素的上方，JavaScript 代码将在 DOM 加载之前运行。
这意味着 JavaScript 在执行前不会等待 DOM 元素加载完毕，因此不会对 DOM 元素有任何引用。
下面是一个示例：
<!DOCTYPE html> <html> <head> <title>Error Tutorial</title> </head> <body> <script src="app.js"></script> <h1 id="content">Hello World!</h1> </body> </html>
在上面的代码中，我们将 script 元素放在了 h1 元素的上方。
下面是我们尝试使用 h1 元素的 ID 引用该元素的 JavaScript 代码：
let content = document.getElementById("content");
console.log(content.textContent);
// Uncaught TypeError: Cannot read properties of null (reading 'textContent');
不出所料，”uncaught typeerror: cannot read property”（未捕获类型错误：无法读取属性）错误向我们抛来，因为在 h1 元素之前的 JavaScript 代码可以注册到 DOM。
要解决这个问题，请务必将 script 元素放在关闭的 body 标记之前，即文档正文中所有其他 DOM 元素的下方。这样，脚本就会在 DOM 中的每个元素加载完毕后开始运行。
<!DOCTYPE html> <html> <head> <title>Error Tutorial</title> </head> <body> <h1 id="content">Hello World!</h1> <script src="app.js"></script> </body> </html>
小结
错误是开发人员不可避免的一部分。虽然它们可能会让你在编码时感到沮丧，但它们也能帮助你学到更多知识，并掌握你正在使用的编程语言。
在遇到错误时，您应始终尝试理解错误信息，因为这将帮助您知道从哪里入手以及该如何修复。您还可以通过类似的错误信息来修复其他错误。
扫描二维码推送至手机访问。
版权声明：本文由2345好导航站长资讯发布，如需转载请注明出处。
“如何修复JavaScript中的 “uncaught typeerror: cannot read property” 错误” 的相关文章
宝塔面板教程之不同环境安装篇
Linux面板环境安装，主要支持LNMP和LAMP、Tomcat、node.js。不过对于大部分站长来说，主要是LNMP和LAMP两个环境的安装。 LNMP和LAMP两个环境的最大区别是，前者采用Nginx作为Web服务器，后者则采用Apache作为Web服务器。（选择哪个作为您的Web服务器，可...
宝塔面板教程之网站管理篇
宝塔面板中的网站管理是非常重要的一部分，也是站长经常需要使用到的功能模块。网站管理，主要用于管理和创建WEB站点。如果您是宝塔面板的使用用户，应该对此模块有充分的了解，以便于您更高效地管理网站。 宝塔面板网站管理模块包括：添加新网站、修改默认页、设置默认站点、站点列表、站点的运行与停止、备份站点、...
静态与动态IP地址有何区别？
每台连接到Internet的计算机都有一个Internet协议 (IP) 地址。但是，并非所有IP地址的外观或行为都相同。 如果您使用计算机网络或服务器，了解动态IP和静态IP之间的区别至关重要。通过详细了解每个协议，您可以选择最适合您需求的解决方案。 在本文中，我们将讨论静态和动态IP之间...
宝塔面板教程之文件管理篇
宝塔面板其中一个最为便捷的功能之一，无需SFTP或者FTP即可对服务器的文件内容进行上传、下载、编辑及删除等管理操作。 文件管理，用于管理该服务器上的文件内容。 文件的基础操作 文件的基础操作有哪些了，主要有这些方面：复制、粘贴、剪切、删除、重命名、压缩、刷新、新建文件、新建目录。...
宝塔面板教程之面板设置篇
宝塔面板设置主要涉及的是宝塔控制后台自身的参数，包括诸如面板的开关、自动更新及SSL、面板端口设置等。虽然这部分不涉及服务器自身的管理，但对宝塔面板的设置也有其重要。 特别是面板端口、安全入口及面板密码等涉及安全的参数设置。 启动和关闭面板 如果你长时间无需使用到宝塔面板，可以考虑...
MongoDB vs MySQL：哪个是更好的数据库管理系统？
由于市场上有各种可用的数据库，用户经常会就MongoDB与MySQL进行辩论，以找出更好的选择。 使用MySQL等关系数据库的组织在根据不断变化的需求管理和存储数据时可能会面临一定的困难。同时，新公司想知道选择什么数据库，这样他们就不会在开发过程中遇到问题。 同时，构建金融应用程序的开发人员...