Skip to content

JavaScript 对象

对象作为键值集合,属性访问、解构与展开运算符。

你将学到

  • 用对象字面量语法创建对象
  • 点号 vs 方括号访问属性
  • 方法、计算键与属性简写
  • 对象解构与展开运算符
  • 浅拷贝 vs 深拷贝及其重要性

概念讲解

什么是对象?

对象是键值对的集合,键是字符串(或 Symbol),值可以是任何东西——原始值、数组、函数或其他对象。

const player = {
  name: "Ada",
  level: 12,
  inventory: ["sword", "shield"],
  attack() {
    return this.level * 5;
  },
};

访问属性

// 点号——键是合法标识符时使用
player.name;     // "Ada"

// 方括号——键是动态的或非合法标识符时使用
const key = "level";
player[key];     // 12
player["inven" + "tory"]; // ["sword", "shield"]

方法与 this

方法是作为属性存储的函数。在普通方法中,this 指向调用方法的对象:

player.attack(); // 60 — this.level 是 12

简写与计算键

const name = "Ada";
const level = 12;
const p = { name, level }; // 简写——等价于 { name: name, level: level }

const dynamicKey = "score";
const obj = { [dynamicKey]: 100 }; // { score: 100 }

解构

const { name, level } = player; // name="Ada", level=12
const { name: playerName } = player; // 重命名:playerName="Ada"

展开与合并

const defaults = { theme: "light", fontSize: 14 };
const userPrefs = { fontSize: 18 };
const merged = { ...defaults, ...userPrefs }; // { theme: "light", fontSize: 18 }

浅拷贝 vs 深拷贝

展开运算符创建的是浅拷贝——嵌套对象仍然共享引用:

const original = { stats: { hp: 100 } };
const copy = { ...original };
copy.stats.hp = 0;
console.log(original.stats.hp); // 0 — 嵌套对象被共享!

需要深拷贝时,使用 structuredClone(original)(在现代浏览器和 Node.js 17+ 中可用)。

示例代码

              // 构建用户档案对象
const user = {
  id: 101,
  name: "Ada Lovelace",
  role: "admin",
  permissions: ["read", "write", "delete"],
  isActive: true,
};

// 解构需要的字段
const { name, role } = user;
console.log(`${name} is an ${role}`);

// 用展开合并新设置
const withSettings = {
  ...user,
  settings: { theme: "dark", notifications: true },
};
console.log(withSettings.settings.theme);

// 遍历键和值
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

// 浅拷贝陷阱
const copy = { ...user };
copy.permissions.push("super");
console.log(user.permissions); // ["read", "write", "delete", "super"] — 共享了!

// 用 structuredClone 深拷贝
const deep = structuredClone(user);
deep.permissions.pop();
console.log(user.permissions); // 深拷贝修改后不变

展示了解构、展开合并、Object.entries 遍历、嵌套数组的浅拷贝陷阱,以及用 structuredClone 安全深拷贝。

动手试一试

常见错误

错误写法

使用浅拷贝却意外修改了嵌套数据

正确做法

展开({ ...obj })只复制一层。嵌套对象和数组仍然共享。需要真正的深拷贝时使用 structuredClone(obj)。

错误写法

对动态或含特殊字符的键使用点号

正确做法

点号只适用于合法标识符键。当键是变量或包含特殊字符时,使用方括号(obj[key])。

相关资源

相关工具

相关速查表

练习 JavaScript 对象

2 个练习

练习 JavaScript 对象

查阅不认识的术语

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

查看术语表

动手做项目

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

查看项目

解读错误信息

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

查看错误