深入学习JavaScript对象

介绍

JavaScript 中的对象是一种复杂的数据类型，它可以用来组织和存储数据。本攻略将介绍 JavaScript 对象的基本概念以及如何使用它们。

创建对象

在 JavaScript 中有两种创建对象的方式：利用对象字面量和利用构造函数。

对象字面量

对象字面量是由一对花括号包裹的键值对集合。

// 创建一个对象字面量
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 25,
  hobbies: ["reading", "swimming"],
  address: {
    street: "123 Main Street",
    city: "New York",
    zipCode: "10001"
  }
};

构造函数

构造函数可以用来创建对象模板。通常情况下，构造函数的命名以大写字母开头。

// 构造函数
function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.greet = function () {
    console.log(`Hello, my name is ${this.firstName} ${this.lastName}.`);
  };
}

// 创建一个 Person 对象
const john = new Person("John", "Doe");
john.greet(); // 输出 "Hello, my name is John Doe."

访问对象属性

访问对象的属性或方法需要使用点（.）操作符来访问。还可以使用中括号（[]）操作符来访问属性，中括号内部为属性的字符串名。

// 访问对象属性
console.log(person.firstName); // 输出 "John"
console.log(person["lastName"]); // 输出 "Doe"

浅拷贝和深拷贝

在 JavaScript 中，对象通过引用传递。这意味着，如果将一个对象赋值给另一个变量，那么两个变量将会引用同一个对象。浅拷贝是指在只复制对象的引用时，缺少对该对象内部属性的复制，也就是只复制对象的第一层。深拷贝则是完全的复制一个对象。

浅拷贝

// 浅拷贝对象
const personCopy = person;
personCopy.firstName = "Jane";

console.log(person.firstName); // 输出 "Jane"

深拷贝

// 深拷贝对象
function deepCopy(obj) {
  if (typeof obj !== "object") return obj;
  const newObj = Array.isArray(obj) ? [] : {};
  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }
  return newObj;
}

const personCopy = deepCopy(person);
personCopy.firstName = "Jane";
personCopy.address.city = "Los Angeles";

console.log(person.firstName); // 输出 "John"
console.log(person.address.city); // 输出 "New York"
console.log(personCopy.firstName); // 输出 "Jane"
console.log(personCopy.address.city); // 输出 "Los Angeles"

示例

示例一

假设有一个数组，数组中存放了一组学生的信息，信息包括学生姓名、学号、班级、性别等。现在需要将这组信息转换成对象存储，并将学号作为该对象的键值。

const students = [
  ["Tom", "001", "Class 1", "male"],
  ["Jerry", "002", "Class 2", "female"],
  ["Bob", "003", "Class 3", "male"]
];

const studentObj = {};

// 将数组转换为对象
for (const student of students) {
  const [name, id, className, gender] = student;
  studentObj[id] = {
    name: name,
    className: className,
    gender: gender
  };
}

console.log(studentObj["002"]); // 输出 { name: "Jerry", className: "Class 2", gender: "female" }

示例二

假设现有一个嵌套的对象，该对象表示一篇文章，文章包括标题、作者、日期、内容等信息。现在需要提取该对象的所有键名，以数组形式存储。

const article = {
  title: "JavaScript 基础教程",
  author: "John Doe",
  date: "2021-01-01",
  content: "这是一篇 JavaScript 基础教程的文章。"
};

const keys = [];

// 提取对象键名
for (const key in article) {
  if (article.hasOwnProperty(key)) {
    keys.push(key);
  }
}

console.log(keys); // 输出 ["title", "author", "date", "content"]

总结

本攻略介绍了 JavaScript 对象的基本概念、创建对象的方式、访问对象属性、浅拷贝和深拷贝以及两条示例说明。现在你应该已经掌握了 JavaScript 对象的基本使用方法，相信在实际开发中可以更好的运用。