js怎么获取json对象的属性值

JavaScript中获取JSON对象属性值的多种方法

在JavaScript开发中,JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于人阅读和编写，同时也易于机器解析和生成，当我们处理JSON数据时，经常需要获取其中的属性值，本文将详细介绍JavaScript中获取JSON对象属性值的多种方法。

使用点表示法（Dot Notation）

最简单直接的方式是使用点表示法来访问对象的属性,这种方法适用于属性名是合法的JavaScript标识符（不包含空格、特殊字符，且不以数字开头）的情况。

const person = {
  name: "张三",
  age: 30,
  address: {
    city: "北京",
    district: "朝阳区"
  }
};
// 获取简单属性值
console.log(person.name); // 输出: "张三"
console.log(person.age);  // 输出: 30
// 获取嵌套对象属性值
console.log(person.address.city); // 输出: "北京"

使用方括号表示法（Bracket Notation）

当属性名包含特殊字符、空格，或者是一个变量时，可以使用方括号表示法。

const person = {
  "full name": "李四",
  "1st contact": "123456789",
  age: 25
};
// 使用字符串键名访问
console.log(person["full name"]); // 输出: "李四"
console.log(person["1st contact"]); // 输出: "123456789"
// 使用变量作为键名
const key = "age";
console.log(person[key]); // 输出: 25

使用解构赋值（Destructuring）

ES6引入的解构赋值语法可以让我们更方便地从对象中提取属性值。

const person = {
  name: "王五",
  age: 28,
  email: "wangwu@example.com"
};
// 基本解构
const { name, age } = person;
console.log(name); // 输出: "王五"
console.log(age);  // 输出: 28
// 重命名变量
const { name: userName, email: userEmail } = person;
console.log(userName); // 输出: "王五"
console.log(userEmail); // 输出: "wangwu@example.com"
// 设置默认值
const { name, gender = "未知" } = person;
console.log(gender); // 输出: "未知"

使用Object.keys()和Object.values()

如果我们需要获取所有属性名或所有属性值,可以使用Object.keys()和Object.values()方法。

const person = {
  name: "赵六",
  age: 35,
  occupation: "工程师"
};
// 获取所有属性名
const keys = Object.keys(person);
console.log(keys); // 输出: ["name", "age", "occupation"]
// 获取所有属性值
const values = Object.values(person);
console.log(values); // 输出: ["赵六", 35, "工程师"]

使用for...in循环

for...in循环可以遍历对象的可枚举属性，包括继承的可枚举属性。

const person = {
  name: "钱七",
  age: 40
};
for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(`${key}: ${person[key]}`);
  }
}
// 输出:
// name: 钱七
// age: 40

使用可选链操作符（?.）

ES2020引入的可选链操作符可以简化深层嵌套对象属性的访问,避免因中间属性不存在而导致的错误。

const user = {
  name: "孙八",
  contact: {
    email: "sunba@example.com",
    phone: {
      mobile: "13800138000"
    }
  }
};
// 传统方式需要多层判断
const mobile = user.contact && user.contact.phone && user.contact.phone.mobile;
console.log(mobile); // 输出: "13800138000"
// 使用可选链操作符
const mobile2 = user.contact?.phone?.mobile;
console.log(mobile2); // 输出: "13800138000"
// 安全访问可能不存在的属性
const fax = user.contact?.fax?.number;
console.log(fax); // 输出: undefined

使用空值合并操作符（??）

ES2020还引入了空值合并操作符,可以与可选链操作符结合使用，为可能不存在的属性提供默认值。

const config = {
  timeout: 5000,
  retries: 3
};
// 使用||可能会把0等假值也替换掉
const timeout = config.timeout || 1000; // 0会被替换为1000
console.log(timeout); // 输出: 1000
// 使用??只有在值为null或undefined时才替换
const timeout2 = config.timeout ?? 1000;
console.log(timeout2); // 输出: 5000
const maxRetries = config.maxRetries ?? 5;
console.log(maxRetries); // 输出: 5

动态属性名访问

当属性名是动态生成的时,可以使用方括号表示法结合变量来访问。

const data = {
  a: 1,
  b: 2,
  c: 3
};
const dynamicKey = 'b';
console.log(data[dynamicKey]); // 输出: 2
// 结合计算属性名
const prefix = 'item';
const suffix = '1';
console.log(data[`${prefix}${suffix}`]); // 输出: undefined (因为data中没有item1属性)