JavaScript 禁用无法读取未定义属性

在这篇文章中，我们将尝试理解使用访问未定义属性时可能遇到的错误，并且通过一些示例来演示使用JavaScript中提供的几种技术来解决或禁用这些错误。

首先，让我们通过下面的示例来分析如何遇到这种错误：

示例1： 在这个示例中，我们将创建一个函数，该函数接受一个参数，例如first_property，然后我们通过该参数访问通过第一个参数传递进去的 second_property 。接着，我们使用try/catch块首先定义一个空变量，并将其作为参数传递到函数中，这些操作都在try块中进行，然后在catch块中捕获错误。然后，我们将在输出中看到我们期望的错误。

Javascript

<script> 
    let randon_function = (first_property) => { 
        console.log(first_property.second_property); 
    }; 
  
    try { 
        let object; 
        randon_function(object); 
    } catch (error) { 
        console.log(error.message); 
    } 
</script>

输出:

Cannot read properties of undefined (reading 'second_property')

现在，由于我们目睹了一个错误，所以我们需要禁用或解决它，而这将在下一个示例中展示出来。

示例2： 这个示例是之前示例的延续，因为在这里我们将看到并可视化之前接收到的示例输出的解决方案。在之前的示例中，我们定义了一个空变量（名称为“object”），现在我们将在其下实例化一个对象，该对象将包含second_property的值。然后我们将将其传递给函数，以便接收一个输出，该输出将是我们传递给second_property的值。

JavaScript

<script> 
    let randon_function = (first_property) => { 
        console.log(first_property.second_property); 
    }; 
  
    try { 
        let object = { 
            second_property: "GeeksforGeeks", 
        }; 
        randon_function(object); 
    } catch (error) { 
        console.log(error.message); 
    } 
</script>

输出:

GeeksforGeeks

示例3： 在这个示例中，我们将尝试用另一个角度来分析可能产生相同错误的情况。在这里，我们还将定义另一个函数，显示其输出中的值。我们将应用一个条件（使用if语句），如果该值未定义，则将使用某个随机属性名称（在这里我们将其取为“xyz”）访问该值。然后我们将创建一个try/catch块，在try块内部创建一个空变量，并在调用时将其作为参数传递给该函数。稍后在catch语句中，我们将捕获该错误消息并将其显示在控制台中作为输出，在输出中，我们将观察到与第一个示例中相同的错误。

JavaScript

<script> 
    let displayValue = (value) => { 
        if (value === undefined) { 
            console.log(value.xyz); 
        } 
        return value; 
    }; 
  
    try { 
        let test_value; 
        console.log(displayValue(test_value)); 
    } catch (error) { 
        console.log(error.message); 
    } 
</script>

输出：

Cannot read properties of undefined (reading 'xyz')

现在，我们已经在输出中看到了不同类型的相同错误，接下来的示例中，我们将尝试禁用或解决这个错误。

示例4： 在这个示例中，我们将编写与上一个示例中相同的代码，稍微改变的是，我们将为该空变量初始化一些值，并将该数值作为不管输出是什么，都在控制台中显示出来。

Javascript

<script> 
    let displayValue = (value) => { 
        if (value === undefined) { 
            console.log(value.xyz); 
        } 
        return value; 
    }; 
  
    try { 
        let test_value = 1234567890; 
        console.log(displayValue(test_value)); 
    } catch (error) { 
        console.log(error.message); 
    } 
</script>