在 JavaScript 中，对象是数据的核心容器，而访问和设置其属性是我们最频繁的操作

2026-01-15 1071 24 min

在 JavaScript 中，对象是数据的核心容器，而访问和设置其属性是我们最频繁的操作。通常，我们使用点表示法（`obj.key`）来完成这个任务。但如果属性名本身是一个变量，或者包含特殊字符，点表示法便会“失灵”。这时，我们需要更强大的工具。

本篇权威指南将深入探讨和对比三种操作对象属性的关键语法：

1. **点表示法 (Dot Notation)**：静态访问的标准方式。
2. **方括号表示法 (Bracket Notation)**：动态访问的瑞士军刀。
3. **计算属性名 (Computed Property Names)**：ES6 中用于对象字面量的优雅语法糖。

理解它们各自的适用场景和局限性，是编写灵活、健壮的 JavaScript 代码的基础。

### 1\. 基础场景：静态属性访问

当属性名是一个固定的、已知的、且符合 JavaScript 标识符规范的字符串时，**点表示法**是最简洁、最常用的选择。

```javascript
const user = {};

// 设置属性
user.name = 'Alice';
user.isAdmin = true;

// 访问属性
console.log(user.name); // "Alice"
```

**标识符规范**：通常指以字母、`$` 或 `_` 开头，后续可包含字母、数字、`$` 或 `_` 的字符串。它**不能**包含空格、连字符 (`-`) 或以数字开头。

---

### 2\. 核心对决：点表示法 vs. 方括号表示法

#### **点表示法 (`.`) 的局限**

点表示法有两个核心局限：

1. **键名必须是静态的、合法的标识符**。
   
   ```javascript
   const user = {};
   // user.first-name = 'Alice'; // SyntaxError: Invalid or unexpected token
   ```
2. **它无法将变量解析为属性名**。
   这是一个最关键的区别。点运算符右侧的任何内容都会被当作一个**字面量字符串**来处理。
   
   ```javascript
   const myProperty = 'name';
   const user = { name: 'Alice' };
   
   console.log(user.myProperty); // undefined
   // 上述代码试图访问一个名为 "myProperty" 的键，而不是 "name" 键。
   ```

#### **方括号表示法 (`[]`) 的威力**

方括号表示法正是为了解决上述两个局限而存在的。它强大之处在于，方括号内的表达式会**先被求值**，其\*\*结果（通常是一个字符串）\*\*才被用作最终的属性名。

**1. 使用变量作为属性名**

这是方括号表示法最核心的用途。

```javascript
const myProperty = 'name';
const user = { name: 'Alice' };

// 正确用法
console.log(user[myProperty]); // "Alice"
// 引擎首先计算 myProperty 的值得到 "name"，然后执行 user["name"]

// 动态设置属性
const key = 'email';
const value = 'alice@example.com';
const userProfile = {};
userProfile[key] = value;
console.log(userProfile); // { email: 'alice@example.com' }
```

**2. 使用包含特殊字符的属性名**

```javascript
const settings = {
  'font-size': '16px',
  'user role': 'admin'
};

console.log(settings['font-size']); // "16px"
// console.log(settings.font-size); // 错误！引擎会尝试计算 font 减去 size
```

---

### 3\. ES6 的优雅方案：计算属性名 (Computed Property Names)

在 ES6 之前，如果你想在**创建对象字面量时**就使用动态键，代码会稍显冗长：

```javascript
// ES5 的写法
const key = 'dynamicKey';
const value = 123;

const obj = {};
obj[key] = value;
// obj -> { dynamicKey: 123 }
```

ES6 引入了**计算属性名**，允许在对象字面量内部直接使用方括号来包裹一个表达式，从而动态地定义属性名。

**实现代码**

```javascript
const key = 'dynamicKey';
const value = 123;

// ES6 的写法
const obj = {
  [key]: value,
  // 表达式也可以是更复杂的计算
  ['prop_' + (2 * 10)]: 'Calculated Prop'
};

console.log(obj);
// 输出: { dynamicKey: 123, prop_20: 'Calculated Prop' }
```

**对比**:

* **方括号表示法 (`obj[key]`)**：用于在对象**已经存在**后，进行动态的**访问或修改**。
* **计算属性名 (`{ [key]: ... }`)**：用于在**创建对象字面量时**，进行动态的**属性定义**。

---

### 4\. 真实世界的应用场景

动态属性是 JavaScript 灵活性的重要体现，以下是一些常见应用：

#### **A. 创建频率映射/分组**

统计一个数组中各项的出现次数。

```javascript
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const fruitCount = {};

for (const fruit of fruits) {
  // fruit 变量被用作动态键
  fruitCount[fruit] = (fruitCount[fruit] || 0) + 1;
}
// fruitCount -> { apple: 3, banana: 2, orange: 1 }
```

#### **B. 处理动态的 API 响应**

将一个扁平的设置数组转换为配置对象。

```javascript
const settingsFromApi = [
  { key: 'theme', value: 'dark' },
  { key: 'fontSize', value: 16 },
  { key: 'showAvatar', value: true }
];

#### **C. 使用计算属性名构建状态更新**

在 React 或其他状态管理库中，常常需要根据变量来更新状态对象中的某一个字段。

```javascript
// 假设 state = { username: '', password: '' }
// inputName 可能是 'username' 或 'password'
// inputValue 是输入框的值
const inputName = 'username';
const inputValue = 'Alice';

const newState = {
  ...state,
  [inputName]: inputValue // 优雅地更新单个字段
};
// newState -> { username: 'Alice', password: '' }
```

---

### 5\. 总结与最终建议

我们评测了操作 JavaScript 对象属性的三种核心语法，并明确了它们各自的职责。

| 语法                    | `obj.key` (点)          | `obj[key]` (方括号)         | `{ [key]: value }` (计算属性) |
| :---------------------- | :------------------------ | :---------------------------- | :------------------------------ |
| **键的类型**      | 静态标识符                | **动态表达式 (字符串)** | **动态表达式 (字符串)**   |
| **核心用途**      | **静态属性的读/写** | **动态属性的读/写**     | **动态属性的定义**        |
| **处理特殊字符?** | 否                        | **是**                  | **是**                    |
| **推荐度**        | ⭐⭐⭐⭐⭐ (用于静态键)   | ⭐⭐⭐⭐⭐ (用于动态键)       | ⭐⭐⭐⭐⭐ (用于动态定义)       |

**最终建议**：

1. 当属性名是固定的、合法的标识符时，请**始终优先使用点表示法 (`.`)**，因为它最简洁、可读性最好。
2. 当属性名存储在一个变量中，或包含空格、连字符等特殊字符时，**必须使用方括号表示法 (`[]`)**。
3. 当你在**创建对象字面量**时需要使用动态键，请使用**计算属性名 (`{ [key]: value }`)** 语法，它能让你的代码更具声明性和紧凑性。