JS对象键名规则讲解
<style>.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
.artBox h1, .artBox h2 { margin: 8px 0; }
.artBox code, .artBox pre { background: #f7f4f3; padding: 2px 6px; tab-size: 4; }
.artBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
.artBox pre code { padding: 0; background: none; }
.artBox blockquote { margin: 10px 20px; padding: 2px 15px; border-left: 3px solid skyblue; background: #e7e5e3; }
</style>
<div class="artBox">
<blockquote>
<p>
<strong>❓ 什么是JavaScript对象</strong>
</p>
<p>在JavaScript中，
<strong>对象</strong>是核心概念和最重要的数据类型。它们是
<strong>无序的数据集合</strong>，由多个“键值对”构成（例如：
<code>name: '名字', age: 13</code>）。对象可以用来描述事物的所有相关信息，包括属性（静态）和方法（动态）。例如，一个对象可以表示一个人，属性可以是姓名、身高、体重等，而方法可以是这个人能做的动作，如跑步或游泳。通过使用对象，开发者可以更好地组织和管理数据，使代码更具可读性和可维护性。
</p>
</blockquote>
<h2>一、核心概念：JavaScript对象的键名规则</h2>
<p>在JavaScript中，对象键名有两种写法：</p>
<ol>
<li>标识符命名规则（identifier）
<ul>
<li>只能包含字母、数字、下划线 _、美元符号 $</li>
<li>不能以数字开头</li>
<li>不能包含空格或连字符（-）</li>
<li>例如：name、age、likesFish 是合法的</li>
</ul>
</li>
<li>字符串键名（string key）
<ul>
<li>可以用引号包裹任意字符串作为键名</li>
<li>可以包含空格、特殊字符、数字开头等</li>
<li>例如：'likes fish'、'123abc'、'background-color'</li>
</ul>
</li>
</ol>
<h2>二、点号（.）访问的限制</h2>
<p>点号访问法
<code>obj.key</code> 只能用于符合标识符规则的键名。试看：
</p>
<pre><code>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</code></pre>
<h2>三、解决多词键名的访问方案：方括号（[]）访问法</h2>
<p>方括号访问法
<code>obj['key']</code> 可以用于任何字符串键名。
</p>
<pre><code>console.log(person['likes fish']);// -> true ✅ 正确的访问方法</code></pre>
<h2>四、与CSS属性名的对比</h2>
<ol>
<li>CSS属性名（如 background-color）：
<ul>
<li>使用连字符，不符合JavaScript标识符规则</li>
<li>在JS中访问时，必须转换为驼峰命名法（backgroundColor）</li>
</ul>
</li>
</ol>
<pre><code>element.style.backgroundColor = 'red'; // ✅
element.style['background-color'] = 'red'; // ✅ 也可以用方括号</code></pre>
<ol start="2">
<li>
<p>对象键名：</p>
<ul>
<li>如果键名是 'background-color'（字符串），则必须用方括号访问：</li>
</ul>
</li>
</ol>
<pre><code>let styles = {
'background-color': 'red'
};
console.log(styles['background-color']);// ✅
console.log(styles.backgroundColor); // ❌ undefined（键名不匹配）</code></pre>
<h2>五、理解技巧</h2>
<ol>
<li>
<p>简单比喻 ：点号访问像是叫朋友的小名（简单、无空格），方括号访问像是叫全名（可以包含空格、特殊字符）。</p>
</li>
<li>
<p>判断标准 ：键名无空格、无连字符、符合变量命名规则 → 可以用点号。键名包含空格、连字符、数字开头等 → 必须用方括号。</p>
</li>
<li>
<p>练习示例</p>
</li>
</ol>
<pre><code>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); // ❌ 语法错误</code></pre>
<h2>六、要点小结</h2>
<ul>
<li>
<p>点号访问：用于标识符键名（无空格、无特殊字符）</p>
</li>
<li>
<p>方括号访问：可用于任何字符串键名</p>
</li>
<li>
<p>CSS属性在JS中：DOM元素的 style 属性使用驼峰命名法</p>
</li>
<li>
<p>对象键名：保持原样，用方括号访问特殊键名</p>
</li>
</ul>
</div> 不知道的太多，谢谢马老师详细讲授JS的点号（.）访问法{:4_180:}
JS的点号（.）访问，对连字符可转为驼峰命名，其余不符合JS标识符规则的，必须用 方括号，对吗？ 杨帆 发表于 2026-3-29 21:18
不知道的太多，谢谢马老师详细讲授JS的点号（.）访问法
JS的点号（.）访问，对连字符可转为驼 ...
这个，主要是有使用范围。这里的点号是应用于对象的读写。 马黑黑 发表于 2026-3-29 22:28
这个，主要是有使用范围。这里的点号是应用于对象的读写。
谢谢老师~慢慢学习，这个是适用于对象的读写 杨帆 发表于 2026-3-29 22:47
谢谢老师~慢慢学习，这个是适用于对象的读写
JS侠义的对象像这样：
let flower = { name: 'rose', price: 20 };
或者：
let flower = new Object();
flower.name = 'rose';
flower.price = 20; 一直对JS有点怕，现在跟在后面认真学习。
谢谢黑黑好帖{:4_187:} 马黑黑 发表于 2026-3-29 22:59
JS侠义的对象像这样：
let flower = { name: 'rose', price: 20 };
谢谢老师~是说 两种写法，一样功能 吧 杨帆 发表于 2026-3-29 23:15
谢谢老师~是说 两种写法，一样功能 吧
就是说JS对象的两种创建方法 红影 发表于 2026-3-29 23:04
一直对JS有点怕，现在跟在后面认真学习。
谢谢黑黑好帖
文科生会对编程语言有天然的恐惧，因为数学基础不好 马黑黑 发表于 2026-3-29 23:43
文科生会对编程语言有天然的恐惧，因为数学基础不好
就是你说的这样，很对{:4_187:} 红影 发表于 2026-3-31 22:48
就是你说的这样，很对
不对俺一般懒得说{:4_170:} 马黑黑 发表于 2026-4-1 07:47
不对俺一般懒得说
说得多对得也多{:4_173:}
页:
[1]