JavaScript 对象

JavaScript 对象

在 JavaScript 中，对象是基础。它们是键值对（key-value pairs）的集合，其中键（key）是字符串（或 Symbol），值（value）可以是任何数据类型，包括其他对象或函数。

现实世界类比：对象、属性和方法

想象一个现实世界的对象，比如一辆汽车。一辆汽车拥有：

• 属性（Properties）： 特征，比如颜色（color）、型号（model）、重量（weight）、当前速度（current speed）。
• 方法（Methods）： 它可以执行的动作，比如启动（start）、加速（accelerate）、刹车（brake）、停止（stop）。

不同的汽车（实例，instances）将拥有相同的属性（properties）和方法（methods）集合，但它们的属性值（例如颜色）将不同，并且方法将作用于该特定的汽车。

JavaScript 对象

JavaScript 变量可以存放简单的数据值（原始值，primitives，比如数字或字符串）：

let carName = "Volvo";

然而，对象可以存放多个值，这些值以命名属性（named properties）的形式组织起来。

对象字面量语法（Object Literal Syntax）

创建对象最常见的方式是使用对象字面量（object literal）：

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2023,
  color: "blue",
  isRunning: false
};

值被写成 name: value 对（或 key: value），用逗号分隔。如果属性名（Property names）是有效的 JavaScript 标识符（identifiers），则可以不加引号。如果它们包含空格或特殊字符，或者属于保留字（reserved words），则必须加引号。

const person = {
  "first name": "John", // 包含空格的键需要加引号
  lastName: "Doe",
  age: 30,
  "eye-color": "brown" // 包含连字符的键需要加引号
};

访问对象属性

你可以通过两种方式访问对象属性（object properties）：

1. 点表示法（Dot Notation）： objectName.propertyName

console.log(car.make);  // 输出: Toyota
console.log(person.lastName); // 输出: Doe

2. 方括号表示法（Bracket Notation）： objectName["propertyName"] （属性名作为字符串）

console.log(car["model"]); // 输出: Camry
console.log(person["first name"]); // 输出: John （包含空格/特殊字符的键需要使用方括号表示法）

// 方括号表示法也允许使用变量作为属性名：
let propertyKey = "color";
console.log(car[propertyKey]); // 输出: blue

修改对象属性

你可以使用赋值（assignment）来修改现有属性（existing property）的值或添加新属性（new property）：

const myComputer = {
  brand: "Apple",
  type: "Laptop"
};

// 修改现有属性
myComputer.type = "MacBook Pro";
console.log(myComputer.type); // Output: MacBook Pro

// 添加新属性
myComputer.year = 2023;
console.log(myComputer.year); // Output: 2023

myComputer["ram_gb"] = 16;
console.log(myComputer.ram_gb); // Output: 16

console.log(myComputer); // { brand: "Apple", type: "MacBook Pro", year: 2023, ram_gb: 16 }

对象方法

方法（Methods）是作为对象属性存储的函数（functions）。它们定义了对象可以执行的动作（actions）。

const personWithMethods = {
  firstName: "Jane",
  lastName: "Doe",
  age: 28,
  // 获取全名的方法
  fullName: function() {
    return this.firstName + " " + this.lastName;
  },
  // ES6 方法的简写语法
  greet() {
    console.log("Hello, my name is " + this.fullName() + " and I am " + this.age + " years old.");
  }
};

this 关键字：

在对象方法内部，this 指向对象本身（即调用该方法的对象）。这使得方法可以访问和操作对象自身的属性（properties）。

访问对象方法：

你可以使用点表示法（dot notation）后跟圆括号 () 来调用对象方法：

const name = personWithMethods.fullName();
console.log(name); // Output: Jane Doe

personWithMethods.greet(); // Output: Hello, my name is Jane Doe and I am 28 years old.

如果你访问方法属性（method property）时不带 ()，它将返回函数定义本身（function definition），而不是调用函数的结果：

const greetFunction = personWithMethods.greet;
console.log(greetFunction); // 输出: [Function: greet] （或类似信息，显示函数定义）

遍历对象属性

你可以使用多种方法遍历对象（object）的属性（properties）：

const user = {
  id: 101,
  username: "coder",
  email: "coder@example.com",
  isActive: true
};

// for...in 循环（遍历可枚举属性，包括继承的属性）
console.log("Using for...in:");
for (const key in user) {
  if (user.hasOwnProperty(key)) { // 检查对象自身属性是一种良好实践
    console.log(`${key}: ${user[key]}`);
  }
}

// Object.keys() （返回对象自身可枚举属性名的数组）
console.log("\nUsing Object.keys():");
Object.keys(user).forEach(key => {
  console.log(`${key}: ${user[key]}`);
});

// Object.values() （返回对象自身可枚举属性值的数组）
console.log("\nUsing Object.values():");
Object.values(user).forEach(value => {
  console.log(value);
});

// Object.entries() （返回对象自身可枚举 [键, 值] 对的数组）
console.log("\nUsing Object.entries():");
Object.entries(user).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

JSON (JavaScript Object Notation)

JSON 是一种轻量级的数据交换格式（data-interchange format）。它易于人类阅读和编写，也易于机器解析（parse）和生成（generate）。其语法源自 JavaScript 对象字面量语法（object literal syntax），但存在一些差异（例如，在 JSON 中，键（keys）必须是双引号引起来的字符串）。

JavaScript 提供了内置方法（built-in methods）用于在 JavaScript 对象（objects）和 JSON 字符串（JSON strings）之间进行转换：

• JSON.stringify(object): 将 JavaScript 对象（object）转换为 JSON 字符串（JSON string）。
• JSON.parse(jsonString): 解析（parses）JSON 字符串（JSON string），根据字符串描述构造出对应的 JavaScript 值或对象（object）。

const book = {
  title: "The Art of Programming",
  author: "Dev Master",
  pages: 300,
  published: true
};

// 将对象转换为 JSON 字符串
const jsonBook = JSON.stringify(book);
console.log(jsonBook); // Output: {"title":"The Art of Programming","author":"Dev Master","pages":300,"published":true}

// 将 JSON 字符串转换回对象
const bookObject = JSON.parse(jsonBook);
console.log(bookObject.title); // Output: The Art of Programming

避免对原始值使用 new Object()

虽然 JavaScript 允许使用构造函数（constructors）为字符串、数字和布尔值等原始类型（primitive types）创建包装对象（wrapper objects）（例如 new String("text"), new Number(123)），但这通常不建议使用（discouraged）。

let x = new String("John");   // x 是一个对象
let y = "John";                 // y 是一个字符串原始值

console.log(typeof x); // "object"
console.log(typeof y); // "string"

使用这些包装对象会使你的代码复杂化，可能导致意外行为（unexpected behavior）（例如 new String("") 在布尔上下文中为真，truthy），并可能减慢执行速度。始终首选直接使用原始值（primitive values）。

当对原始值调用方法时，JavaScript 会自动将其转换为对象（自动装箱，autoboxing），因此你仍然可以使用像 y.toUpperCase() 这样的方法。

对象（Objects）是 JavaScript 庞大且重要的组成部分。创建对象的其他方法包括构造函数（constructor functions）和 ES6 类（classes），它们用于更复杂的面向对象编程（object-oriented programming）模式。