Skip to content

对象

了解对象如何用键值对把相关数据分组——最常见的结构化信息方式。

你将学到

  • 对象是什么、为什么要用
  • 如何用点号和方括号读写属性
  • 如何给对象添加方法（函数）
  • 对象与数组如何组合以建模真实数据

概念讲解

对象

对象是键值对的集合。数组适合有序列表，对象则适合描述一个"东西"的若干命名属性。一个用户有姓名、年龄、邮箱——对象把这些归到一起。

创建与访问

const user = {
  name: "Ada",
  age: 36,
  email: "[email protected]",
};

user.name;        // "Ada"   —— 点号
user["age"];      // 36      —— 方括号

写代码时就知道键名，用点号；键名是动态的（存在变量里），用方括号。

添加与更新属性

user.isAdmin = true;     // 新增属性
user.age = 37;           // 更新已有属性

方法

值为函数的属性叫方法。方法让对象把行为和数据放在一起：

const counter = {
  count: 0,
  increment() { this.count++; },
  reset() { this.count = 0; },
};
counter.increment();
counter.increment();
console.log(counter.count);  // 2

对象 + 数组

真实数据常把两者混用。一组用户是对象数组：

const users = [
  { name: "Ada", role: "admin" },
  { name: "Grace", role: "editor" },
];

这正是大多数 API 返回的 JSON 形态——所以理解对象对 Web 开发至关重要。

示例代码

              const product = {
  id: 42,
  name: "Wireless Mouse",
  price: 29.99,
  inStock: true,
  tags: ["electronics", "accessory"],
};

// 读取属性：
console.log(product.name);            // "Wireless Mouse"
console.log(product["price"]);        // 29.99

// 更新与新增：
product.price = 24.99;                // 促销价
product.discount = "20% off";

// 用 Object.keys 遍历键：
for (const key of Object.keys(product)) {
  console.log(key, ":", product[key]);
}

这个 product 对象混用了字符串、数字、布尔和数组。Object.keys 返回键名数组，便于遍历每个属性。

动手试一试

  • JSON Formatter

    JSON 由对象和数组构成。粘贴一个 product 对象看结构可视化。

  • JSON to TypeScript

    把对象转成 TypeScript 接口——看类型如何描述对象形状。

常见错误

错误写法

用点号访问存在变量里的动态键。

正确做法

改用方括号：obj[key]，不是 obj.key。点号会把 key 当成字面属性名。

错误写法

混淆数组（有序、数字下标）与对象（无序、字符串键）。

正确做法

同类事物的有序列表用数组；单个实体的命名属性用对象。需要实体列表时两者组合。

相关资源

相关代码片段

练习 对象

2 个练习

练习 对象

查阅不认识的术语

新手友好的术语表用大白话解释编程术语——变量、函数、DOM、Promise 等等。

查看术语表

动手做项目

通过引导式项目应用所学，含起始代码与解决方案。

查看项目

解读错误信息

用大白话解释常见错误——什么意思、为什么发生、如何修复。

查看错误