如何在JavaScript中读取并展示JSON数据中的指定属性值

首先需要将目标对象赋值给一个变量，再通过两种标准语法读取属性值，以下是完整实现示例：

// 1. 先将对象赋值给自定义变量，此处以vehicle为例
const vehicle = {
    health: 1000,
    neonColor: [
        255,
        0,
        255
    ],
    modSideSkirt: -1,
    modHood: -1,
    // 其余属性省略
}

// 2. 方式一：点符号读取（适用于属性名是合法标识符的场景）
const healthValue1 = vehicle.health
// 控制台打印
console.log('健康值：', healthValue1) // 输出 健康值：1000
// 页面展示示例：插入到页面body中
document.body.innerText = `当前健康值为：${healthValue1}`

// 3. 方式二：方括号读取（适用于属性名动态生成、包含特殊字符的场景）
const targetProp = 'health'
const healthValue2 = vehicle[targetProp]
console.log('健康值：', healthValue2) // 输出 健康值：1000

常见失败原因排查 #

• 未给对象赋值变量就直接读取属性：直接执行{health: 1000}.health会触发语法错误，JS会将开头的{识别为代码块起始标记
• 属性名拼写错误、大小写不匹配：例如将health写为Health会返回undefined
• 异步获取的对象未等待加载完成就读取：如果对象是接口返回的异步数据，需要在请求回调或await异步操作完成后再读取属性

内容的提问来源于stack exchange，提问作者Edward