JS对象键名规则讲解

马黑黑 · 发表于 2026-3-29 20:58

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

❓ 什么是JavaScript对象

在JavaScript中，对象是核心概念和最重要的数据类型。它们是 无序的数据集合，由多个“键值对”构成（例如： name: '名字', age: 13）。对象可以用来描述事物的所有相关信息，包括属性（静态）和方法（动态）。例如，一个对象可以表示一个人，属性可以是姓名、身高、体重等，而方法可以是这个人能做的动作，如跑步或游泳。通过使用对象，开发者可以更好地组织和管理数据，使代码更具可读性和可维护性。

一、核心概念：JavaScript对象的键名规则

在JavaScript中，对象键名有两种写法：

标识符命名规则（identifier）
- 只能包含字母、数字、下划线 _、美元符号 $
- 不能以数字开头
- 不能包含空格或连字符（-）
- 例如：name、age、likesFish 是合法的
字符串键名（string key）
- 可以用引号包裹任意字符串作为键名
- 可以包含空格、特殊字符、数字开头等
- 例如：'likes fish'、'123abc'、'background-color'

二、点号（.）访问的限制

点号访问法 obj.key 只能用于符合标识符规则的键名。试看：

let person = {
  name: 'Alice',
  age: 15,
  'likes fish': true
};
console.log(person.name);       // -> Alice ✅ 可以用 person.name
console.log(person.age);        // -> 15    ✅ 可以用 person.age
console.log(person.likes fish); // -> 报错  ❌ 不能用 person.likes fish

三、解决多词键名的访问方案：方括号（[]）访问法

方括号访问法 obj['key'] 可以用于任何字符串键名。

console.log(person['likes fish']);  // -> true ✅ 正确的访问方法

四、与CSS属性名的对比

CSS属性名（如 background-color）：
- 使用连字符，不符合JavaScript标识符规则
- 在JS中访问时，必须转换为驼峰命名法（backgroundColor）

element.style.backgroundColor = 'red';     // ✅
element.style['background-color'] = 'red'; // ✅ 也可以用方括号

对象键名：
- 如果键名是 'background-color'（字符串），则必须用方括号访问：

let styles = {
  'background-color': 'red'
};
console.log(styles['background-color']);  // ✅
console.log(styles.backgroundColor);      // ❌ undefined（键名不匹配）

五、理解技巧

简单比喻：点号访问像是叫朋友的小名（简单、无空格），方括号访问像是叫全名（可以包含空格、特殊字符）。
判断标准：键名无空格、无连字符、符合变量命名规则 → 可以用点号。键名包含空格、连字符、数字开头等 → 必须用方括号。
练习示例

let student = {
  name: '小明',
  'favorite color': 'blue',
  'test-score': 95
};
// 哪些访问是正确的？
console.log(student.name);              // ✅
console.log(student['favorite color']); // ✅
console.log(student['test-score']);     // ✅
console.log(student.test-score);        // ❌ 语法错误