B44. 简单对象 JSON

4.1. JavaScript 对象的创建

Python 里用字典保存学生信息：{"name": "小明", "age": 16}，JavaScript 对象更强大！不仅能存数据，还能直接包含函数，就像一个"智能字典"。

4.1.1. 字面量创建

// 最常用的方式
const student = {
  name: "小明",
  age: 16,
  scores: [85, 90, 78]
};

4.1.2. 构造函数创建

// 等价于上面的写法
const student = new Object();
student.name = "小明";
student.age = 16;

易错点 属性名不用加引号（除非包含空格或特殊字符）：

• { name: "小明" } √
• { "name": "小明" } 也合法但不推荐

4.2. 对象属性的访问语法

在 Python 中用 student["name"] 访问属性，JavaScript 还支持更简洁的 student.name 语法，就像访问 Python 的类属性！

4.2.1. 点表示法

console.log(student.name); // 输出：小明

4.2.2. 方括号表示法

// 当属性名有空格或动态获取时必须用方括号
const key = "age";
console.log(student[key]); // 输出：16

易错点 student.age 和 student["age"] 的区别：前者要求属性名是合法标识符，后者可以接受任何字符串。

4.3. 对象方法的定义与调用

想让对象自己会计算平均分？在 JavaScript 中可以直接把函数写进对象里，这就像给字典装上"大脑"！

4.3.1. 方法定义

const student = {
  name: "小明",
  scores: [85, 90, 78],
  // 定义方法
  getAverage() {
    return this.scores.reduce((a,b) => a + b) / this.scores.length;
  }
};

console.log(student.getAverage()); // 输出：84.333...

易错点 方法中的 this 指向问题：普通函数中的 this 指向调用者，箭头函数会继承外层 this。

4.4. JSON 模块是重要的序列化/反序列化工具

前端和后端如何交换数据？就像把字典打包成字符串快递过去！JSON.stringify() 就是打包工具，JSON.parse() 就是拆快递的工具。

4.4.1. 序列化与反序列化

// 将对象转为 JSON 字符串
const jsonStr = JSON.stringify(student);
// 输出：{"name":"小明","scores":[85,90,78]}

// 将 JSON 字符串转回对象
const obj = JSON.parse(jsonStr);

4.4.2. 特殊值处理

// undefined/函数/符号值会被自动过滤
const data = {
  id: undefined,
  greet() { return "hi"; }
};
console.log(JSON.stringify(data)); // 输出：{}

易错点 JSON 不支持 undefined 和函数，序列化时会自动忽略这些值。

知识回顾

• 对象是键值对的集合，支持嵌套和方法
• . 和 [] 两种属性访问方式各有适用场景
• JSON 是数据交换的标准格式，注意特殊值的处理
• 方法中的 this 指向需要特别注意

课后练习

基础题

1. （选择）以下哪种写法能正确获取属性？ A. obj."first name" B. obj[first name] C. obj["first name"] ✅

2. （填空）将对象转为 JSON 字符串的方法： JSON.___(obj) → 答案：stringify

3. （纠错）找出代码错误：

   const user = { name: "张三" };
   user.age = 18; // 正确！对象属性可以动态添加

项目题

制作用户信息卡片

要求：

1. 创建包含姓名、年龄、爱好的对象
2. 添加方法计算出生年份（根据当前年份）
3. 将对象转为 JSON 字符串显示在页面上
4. （拓展）添加样式美化显示效果