json对象怎么获取属性

JSON对象属性获取全攻略：从基础到高级技巧

在Web开发中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，几乎无处不在，无论是前后端数据交互、API响应，还是配置文件存储，我们都需要频繁地从JSON对象中提取属性值，本文将系统介绍JSON对象属性获取的各种方法，从基础语法到高级技巧,帮你彻底这一核心技能。

初识JSON对象：什么是属性？

在开始获取属性之前，我们先简单回顾JSON对象的结构，JSON对象本质上是由“键值对”（Key-Value Pair）组成的集合，键（Key）是字符串，值（Value）可以是字符串、数字、布尔值、数组、对象甚至null。

{
  "name": "张三",
  "age": 25,
  "isStudent": false,
  "courses": ["数学", "英语"],
  "address": {
    "city": "北京",
    "district": "海淀区"
  }
}

这里的name、age、isStudent等都是对象的“属性”（Property），获取属性,就是通过特定的语法从对象中取出这些键对应的值。

基础获取方式：点表示法与方括号表示法

点表示法（Dot Notation）

最直观、最常用的属性获取方式是点表示法，语法为对象.属性名，这种方式适合属性名是合法的标识符（不包含空格、特殊字符，且不以数字开头）的场景。

示例：

const user = {
  name: "张三",
  age: 25,
  isStudent: false
};
console.log(user.name);    // 输出: "张三"
console.log(user.age);     // 输出: 25
console.log(user.isStudent); // 输出: false

注意事项：

• 如果属性名包含特殊字符（如空格、连字符）或以数字开头，点表示法会报错。user["user-name"]不能写成user.user-name（会被视为减号运算符）。
• 如果属性不存在，返回undefined，不会报错：

  console.log(user.gender); // 输出: undefined

方括号表示法（Bracket Notation）

方括号表示法语法为对象["属性名"]，它比点表示法更灵活,适用于以下场景：

• 属性名包含特殊字符或数字开头；
• 属性名存储在变量中（动态属性访问）。

示例1：属性名包含特殊字符

const userInfo = {
  "user-name": "李四",
  "2nd-place": "亚军"
};
console.log(userInfo["user-name"]); // 输出: "李四"
console.log(userInfo["2nd-place"]); // 输出: "亚军"

示例2：动态属性访问

const user = {
  name: "王五",
  age: 30,
  hobby: "阅读"
};
const dynamicKey = "hobby";
console.log(user[dynamicKey]); // 输出: "阅读"（相当于user.hobby）

注意事项：

• 方括号中的属性名必须是字符串（或可被转换为字符串的值，如数字），否则会尝试将值转为字符串。user[123]会查找属性名"123"。
• 同样，属性不存在时返回undefined：

  console.log(user["gender"]); // 输出: undefined

嵌套属性获取：逐层

JSON对象中常常嵌套其他对象（如前面的address属性），获取嵌套属性需要通过“逐层访问”实现,无论是点表示法还是方括号表示法都可以组合使用。

使用点表示法逐层访问

const user = {
  name: "张三",
  address: {
    city: "北京",
    district: "海淀区",
    street: {
      name: "中关村大街",
      number: "1号"
    }
  }
};
console.log(user.address.city);           // 输出: "北京"
console.log(user.address.street.name);   // 输出: "中关村大街"

使用方括号表示法逐层访问

console.log(user["address"]["district"]); // 输出: "海淀区"
console.log(user["address"]["street"]["number"]); // 输出: "1号"

混合使用点表示法和方括号表示法

const key1 = "address";
const key2 = "street";
console.log(user[key1][key2].name); // 输出: "中关村大街"

注意事项：

• 如果某一层属性不存在，会报错（TypeError: Cannot read properties of undefined）。user.address.phone（address存在，但phone不存在）会报错。
• 安全访问：可以通过可选链操作符（，ES2020引入）避免报错，当某一层属性为undefined或null时，整个表达式返回undefined而不会中断：

  console.log(user.address?.phone?.number); // 输出: undefined（不会报错）

动态属性与遍历：灵活处理未知结构

动态获取所有属性名：Object.keys()

如果需要获取对象的所有属性名（键），可以使用Object.keys()方法,它返回一个包含所有属性名的数组。

示例：

const user = {
  name: "张三",
  age: 25,
  isStudent: false
};
console.log(Object.keys(user)); // 输出: ["name", "age", "isStudent"]

动态遍历所有属性：for...in循环

for...in循环用于遍历对象的可枚举属性（包括原型链上的属性，需用hasOwnProperty过滤）。

示例：

const user = {
  name: "张三",
  age: 25,
  isStudent: false
};
for (let key in user) {
  console.log(`${key}: ${user[key]}`);
}
// 输出:
// name: 张三
// age: 25
// isStudent: false

过滤原型链属性：

for (let key in user) {
  if (user.hasOwnProperty(key)) {
    console.log(`${key}: ${user[key]}`);
  }
}

动态获取属性值：Object.values()

如果只需要所有属性的值（不关心键），可以使用Object.values(),返回一个包含所有属性值的数组。

示例：

console.log(Object.values(user)); // 输出: ["张三", 25, false]

同时获取键和值：Object.entries()

Object.entries()返回一个数组，每个元素是[key, value]形式的数组,适合需要同时处理键和值的场景。

示例：

console.log(Object.entries(user));
// 输出: [["name", "张三"], ["age", 25], ["isStudent", false]]

高级技巧：安全获取与默认值

可选链操作符（?.）：避免嵌套属性报错

如前所述，可选链操作符可以安全访问嵌套属性，当左侧的表达式为null或undefined时，表达式直接返回undefined,不会继续访问右侧属性。

示例：

const user = {
  name: "张三",
  address: {
    city: "北京"
    // 没有district和street
  }
};
// 传统方式：需要多层判断
const street = user.address && user.address.street ? user.address.street.name : undefined;
console.log(street); // 输出: undefined
// 可选链：更简洁
const streetShort = user.address?.street?.name;
console.log(streetShort); // 输出: undefined

空值合并操作符（??）：设置默认值

当获取的属性可能是null或undefined时，可以用空值合并操作符提供默认值，它仅在左侧为null或undefined时返回右侧默认值，区别于（左侧为假值时返回右侧，包括0、false、等）。

示例：

const user = {
  name: "张三",
  age: 0,
  gender: null
};
// 传统方式：|| 会过滤掉假值
const ageDefault = user.age || 18; // 0是假值，返回18
console.log(ageDefault); // 输出: 18（可能不符合预期，age=0是有效值）
// 空值合并：?? 仅处理null/undefined
const ageCorrect = user.age ?? 18; // 0不是null/undefined，返回0
console.log(ageCorrect