JavaScript JSON 取值教程：点语法、方括号、动态属性与可选链

JavaScript 中常说的“JSON 取值”，通常包含两个步骤：先把 JSON 字符串解析成 JavaScript 对象，再通过属性名读取数据。

JSON 字符串与对象的区别

JSON 字符串：

const text = '{"name":"Tom","age":18}';

JavaScript 对象：

const user = JSON.parse(text);

console.log(user.name);
console.log(user.age);

只有字符串才需要调用 JSON.parse。如果接口库已经返回对象，再次解析会报错。

点语法取值

const user = {
    name: "Tom",
    age: 18
};

console.log(user.name);
console.log(user.age);

点语法简洁直观，适合属性名固定且符合 JavaScript 标识符规则的情况。

方括号取值

console.log(user["name"]);

属性名保存在变量中时，必须使用方括号：

const key = "name";

console.log(user[key]);  // Tom
console.log(user.key);   // undefined

user.key 查找的是名字固定为 key 的属性，并不会读取变量 key 的值。

动态拼接属性名

const data = {
    r1: "value 1",
    r2: "value 2",
    r3: "value 3"
};

for (let i = 1; i <= 3; i++) {
    console.log(data["r" + i]);
}

也可以使用模板字符串：

for (let i = 1; i <= 3; i++) {
    console.log(data[`r${i}`]);
}

特殊属性名

属性名包含空格、连字符或以数字开头时，需要使用方括号：

const config = {
    "user-name": "Tom",
    "display name": "Tom Cat",
    "1st": true
};

console.log(config["user-name"]);
console.log(config["display name"]);
console.log(config["1st"]);

遍历对象

只需要键名：

for (const key of Object.keys(data)) {
    console.log(key);
}

同时读取键和值：

for (const [key, value] of Object.entries(data)) {
    console.log(key, value);
}

安全读取嵌套属性

当中间属性可能不存在时，可以使用可选链：

const result = {
    user: {
        profile: {
            name: "Tom"
        }
    }
};

console.log(result.user?.profile?.name);
console.log(result.account?.profile?.name); // undefined

配合空值合并运算符设置默认值：

const name = result.account?.profile?.name ?? "未设置";

这比连续使用 && 更容易阅读，也不会把 0、false 和空字符串误判为缺失值。