什么是 JavaScript 对象？探索对象的基本使用方式！

文章目录

🧐 什么是 JavaScript 对象？探索对象的基本使用方式！

🧐 什么是 JavaScript 对象？探索对象的基本使用方式！

大家好！今天我们来聊一聊 JavaScript 中最核心、最常用的概念之一——对象（Object）！🎉 无论你是刚入门的 JavaScript 小白，还是有一定经验的开发者，对象的知识都能让你写出更加高效、简洁的代码。所以，今天就让我们一起深入了解一下 JavaScript 对象吧！📝

🏁 1. 对象是什么？

在 JavaScript 中，对象就是一组相关数据和功能的集合，它是用来存储键值对（key-value pairs）的数据结构。简单来说，对象允许你通过**键（key）**来访问和操作数据。

举个例子，想象你有一个关于“人物”的对象，它可能包含“名字”、“年龄”和“职业”等属性。每个属性都有对应的值。

对象的语法

创建对象最常见的方式是使用花括号 {}：

const person = {
  name: "Alice",
  age: 25,
  job: "Developer"
};

在这个例子中，person 是一个对象，它包含了三个属性：name、age 和 job，分别对应的值是 "Alice"、25 和 "Developer"。这些属性就是键（key），而 "Alice"、25 和 "Developer" 则是值（value）。

🧐 2. 如何访问对象的属性？

通过点（.）操作符访问

最直接的访问方式是通过**点操作符（.）**来获取对象的属性。

console.log(person.name);  // 输出 "Alice"
console.log(person.age);   // 输出 25

通过中括号（[]）访问

你也可以使用中括号来访问对象的属性，尤其是当属性名包含空格或特殊字符时，这种方式更为有效。

console.log(person["job"]);  // 输出 "Developer"

如果属性名是动态的，比如存储在一个变量中，也可以使用这种方式：

let prop = "age";
console.log(person[prop]);  // 输出 25

🚀 3. 动态添加和删除属性

对象是非常灵活的，你可以动态地给对象添加新的属性或删除已有的属性。

添加属性

你可以通过点操作符或中括号操作符来给对象动态添加属性：

person.city = "New York";  // 通过点操作符添加
person["country"] = "USA"; // 通过中括号操作符添加

删除属性

使用 delete 关键字可以删除对象的属性：

delete person.city;  // 删除 "city" 属性

✨ 4. 对象的方法（Method）

对象不仅仅可以存储数据，还可以包含功能，这些功能通常表现为方法（method）。方法就是对象的属性，它的值是一个函数。

定义方法

const person = {
  name: "Bob",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // 输出 "Hello, my name is Bob"

你也可以使用更简洁的语法来定义方法：

const person = {
  name: "Bob",
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // 输出 "Hello, my name is Bob"

在方法中，this 关键字指向的是调用该方法的对象本身。在这个例子中，this.name 就是 person 对象中的 name 属性。

🎯 5. 迭代对象的属性

有时候你可能需要遍历对象的所有属性。JavaScript 提供了几种方法来做到这一点。

使用 `for...in` 循环

for...in 循环可以遍历对象的所有可枚举属性。

for (let key in person) {
  console.log(key + ": " + person[key]);
}

使用 `Object.keys()`、`Object.values()` 和 `Object.entries()`

Object.keys(obj) 返回对象的所有键。
Object.values(obj) 返回对象的所有值。
Object.entries(obj) 返回对象的所有键值对数组。

console.log(Object.keys(person));    // ["name", "greet"]
console.log(Object.values(person));  // ["Bob", function]
console.log(Object.entries(person)); // [["name", "Bob"], ["greet", function]]

⚡ 6. 对象的继承与原型链

JavaScript 中的对象是可以继承的。每个对象都有一个隐藏的 __proto__ 属性，指向它的构造函数的原型对象。通过原型链，JavaScript 实现了对象的继承。

例如：

const animal = {
  species: "Mammal",
  speak() {
    console.log("Roar!");
  }
};

const dog = Object.create(animal);
dog.breed = "Golden Retriever";
dog.speak();  // 输出 "Roar!"，继承自 animal 对象