《深入理解 JavaScript 对象：属性命名、访问与遍历的那些细节》

JavaScript 中的对象：从基础到进阶

在 JavaScript 中，对象是数据组织的核心方式之一。无论是存储配置信息、封装函数行为，还是构建复杂的类与实例，对象都扮演着不可或缺的角色。本文将带你深入理解 JavaScript 对象的方方面面，包括属性定义、访问方式、命名规则以及遍历技巧。

---

对象的创建方式

let user = new Object();
let user ={};//字面量创建

通过我们使用花括号来，也就是字面量

1. 文本和属性

在 JavaScript 中，对象是由一组 键值对 （key-value ）组成的集合。每个键被称为"属性名"，对应的值称为"属性值"。

考虑下面这段代码来进行一个全方位演示

const user = {
  name: "Alice",
  age: 25,
  email: "alice@example.com",
 //多词属性
  "like dogs":true,
};

• name、age、email 、"like dogs"是属性名
• "Alice"、25、"alice@example.com" 是属性值

• 当我们使用多字词语来命名属性时，必须加上引号，如代码中的like dogs
• 列表中的最后一个属性应以逗号结尾----这叫做尾随（trailing）或悬挂（hanging）逗号。这样便于我们添加、删除和移动属性，因为所有的行都是相似的。

---

2. 方括号语法：动态访问属性

考虑这样一段代码：

const user = {
  name: "Alice",
  age: 25,
  email: "alice@example.com",
 //多词属性
  "like dogs":true,
};
console.log(user.name) // Alice
console.log(user.age) //25
console.log(user.like dogs) // 会是true吗？

我们通常都可以通过.符号来访问我们的对象属性，但是考虑上面这段代码，当我们访问name和age时，确实能够访问到name 和age

但是当我们去使用点符号访问like dogs属性时，就会给出语法错误

背后的原因：

• 由于这是一个多词属性，avaScript 理解不了。它认为我们在处理 user.likes，然后在遇到意外的 birds 时给出了语法错误。

• 点符号要求 key 是有效的变量标识符。这意味着：不包含空格，不以数字开头，也不包含特殊字符（允许使用 $ 和 _）。

处理方法：

• 通过方括号进行访问

通过方括号我们可以对多词属性实现和.操作一样的效果，但要注意 ：方括号并不是只用于多词属性，普通属性也可以实现一样的效果，只是因为.操作在我们访问普通属性时更方便

方括号-计算属性

当创建一个对象时，我们可以在对象字面量中使用方括号。这叫做 计算属性 。

例如这样一段代码：

let fruit = apple//这里做一个简单的模拟用户输入

let bag = {
  [fruit]: 5, // 属性名是从 fruit 变量中得到的
};

alert( bag.apple ); // 5 

计算属性的含义很简单：[fruit] 含义是属性名应该从 fruit 变量中获取。

我们可以在方括号中使用更复杂的表达式。

例如这样一段代码：

通过方括号我们可以实现很多复杂操作，在这里就不一一讲解

3. 属性值简写（ES6 新特性）

ES6 引入了简洁的属性值写法，当你需要将变量名直接作为属性名并赋值自身时，可以直接省略冒号和重复的变量名。

const name = "Bob";
const age = 30;

const person = {
  name,        // 等价于 name: name
  age,         // 等价于 age: age
  greet() {     // 方法简写
    return `Hello, I'm ${name}`;
  }
};

console.log(person.name); // "Bob"

这种写法让代码更简洁，特别适合构造函数或组件配置中。

---

4. 属性名称限制

虽然属性名通常是字符串，但并不是所有字符串都能成为合法的属性名。

合法的属性名：

• 字母、数字、下划线 _、美元符号 $
• 以字母、下划线或美元符号开头
• 可以包含 Unicode 字符（如中文）

然而，对象中属性不受这些限制

let obj = {
  for: 1,
  let: 2,
  return: 3
};
console.log(obj.for,obj.let,obj.return);

"整数属性"问题：

一个字符串，如果它可以被转换为整数，再转回字符串时仍然和原来一样，那么它就是一个"整数属性" 。这类属性在 for...in 遍历时会按数值顺序排列。

const obj = {
  "1": "one",
  "0": "zero",
  "10": "ten",
  "2": "two"
};

for (let key in obj) {
  console.log(key);
}
// 输出顺序：0, 1, 2, 10 → 按数值排序

而像 "1.2" 或 "+49" 则不会被视为整数属性，仍按创建顺序排列。

---

5. 属性存在性测试：in 操作符

相比于其他语言，JavaScript 的对象有一个需要注意的特性：能够被访问任何属性。即使属性不存在也不会报错！读取不存在的属性只会得到 undefined。所以我们可以很容易地判断一个属性是否存在：

但是要检查某个属性是否存在于对象中，我们可以使用也 in 操作符。

const user = { name: "Alice", age: 25 };

console.log("name" in user); // true
console.log("email" in user); // false
console.log("toString" in user); // true（继承自 Object.prototype）

为何会有 in 运算符呢？与 undefined 进行比较来判断还不够吗？ 是的，大部分时候确实通过undefined判断完全足够，但考虑这样一个特殊情况

let obj = {
  test: undefined
};

console.log(obj.test); // 显示 undefined，所以属性不存在？

console.log("test" in obj);

• 所以当值本身为undefined时，我们不能通过这种方式进行断定，虽然这种情况很少发生，但这也正是in为什么特殊的原因

6. "for...in" 循环

for...in 是用来遍历对象所有可枚举属性的循环语句。

const obj = {
  a: 1,
  b: 2,
  c: 3
};

for (let key in obj) {
  console.log(key, obj[key]);
}
// 输出：
// a 1
// b 2
// c 3

使用注意事项：

1. 遍历顺序 ：
   • 整数属性按升序排列（如 "0", "1", "10"）
   • 其他属性按创建顺序排列

let codes = {
  "49": "Germany",
  "41": "Switzerland",
  "44": "Great Britain",
  // ..,
  "1": "USA"
};

for(let code in codes) {
  console.log(code); // 1, 41, 44, 49
}

2. 避免用于数组：

• 数组的索引是整数属性，所以 for...in 会按数值排序，但可能误处理 length 或其他非索引属性。

推荐使用 for...of 或 Array.forEach() 遍历数组。

---

最后：

JavaScript 的对象看似简单，却蕴含着许多细节。掌握这些知识点不仅能写出更优雅的代码，还能避免潜在的 bug。希望这篇笔记对你有所帮助！

---