TypeError无法读取未定义的属性“”price“”

TypeError 是 JavaScript 中常见的错误类型之一，表示尝试访问未定义（undefined）或空（null）对象的属性。在你的例子中，错误信息 TypeError: Cannot read property 'price' of undefined 表示你尝试读取一个未定义对象的 price 属性。

基础概念

TypeError: JavaScript 中的一种错误类型，表示操作数不符合期望的类型。
undefined: 表示变量未被赋值。
null: 表示变量有意地没有值。

可能的原因

变量未初始化：尝试访问的变量未被正确初始化。
对象属性不存在：尝试访问的对象本身存在，但其 price 属性不存在。
异步操作问题：在异步操作（如回调函数、Promise、async/await）中，数据可能在访问时还未准备好。

解决方法

1. 检查变量初始化

确保变量在使用前已被正确初始化。

let product = { price: 100 };
console.log(product.price); // 正常

2. 使用可选链操作符（Optional Chaining）

可选链操作符 ?. 可以安全地访问深层嵌套对象的属性，如果中间某个属性不存在，表达式会短路返回 undefined 而不是抛出错误。

let product = {};
console.log(product?.price); // 输出: undefined，不会抛出错误

3. 使用条件判断

在访问属性前进行条件判断，确保对象存在。

let product = {};
if (product) {
    console.log(product.price); // 正常
} else {
    console.log('Product is undefined');
}

4. 处理异步操作

确保在数据准备好后再进行访问。

async function fetchProduct() {
    let response = await fetch('/api/product');
    let product = await response.json();
    if (product) {
        console.log(product.price);
    } else {
        console.log('Product data is not available');
    }
}

应用场景

前端开发：在处理用户输入或从服务器获取数据时，经常会遇到对象属性可能不存在的情况。
后端开发：在处理数据库查询结果或外部API响应时，数据可能不完整或延迟到达。

示例代码

假设我们从服务器获取一个产品对象，并尝试访问其 price 属性：

async function getProductPrice(productId) {
    try {
        let response = await fetch(`/api/products/${productId}`);
        let product = await response.json();
        
        // 使用可选链操作符
        console.log(product?.price || 'Price not available');
        
        // 或者使用条件判断
        if (product) {
            console.log(product.price);
        } else {
            console.log('Product not found');
        }
    } catch (error) {
        console.error('Error fetching product:', error);
    }
}

通过上述方法，可以有效避免 TypeError 并提高代码的健壮性。