JavaScript 对象

在本教程中,你将学习如何在 JavaScript 中创建和使用对象。

什么是对象?

JavaScript 是一种基于对象的语言,在 JavaScript 中,几乎所有东西都是一个对象,或者就像一个对象。因此,要有效地使用 JavaScript,我们需要了解对象的工作方式以及如何创建自己的对象并使用它们。

JavaScript 对象只是命名值的集合。这些命名值通常称为对象的属性。如果你还记得 JavaScript 数组章节,则数组是值的集合,其中每个值都有一个索引(数字键),从零开始,每个值递增 1。对象类似于数组,但区别在于你自己定义键,例如名称、年龄、性别等。在以下部分中,我们将详细了解对象。

创建对象

可以使用带有可选属性列表的大括号 {} 创建对象。属性是 键:值 对,其中键(或属性名称)始终是字符串,值(或属性值)可以是任何数据类型,如字符串、数字、布尔值或复杂数据类型(如数组)、函数和其他对象。此外,将函数作为其值的属性通常称为方法,以将它们与其他属性区分开来。典型的 JavaScript 对象可能如下所示:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

上面的例子中创建名为 person 的对象,其具有三个属性 nameage 以及 gender 和一个方法 displayName() 。该 displayName() 方法显示 this.name 解析为 person.name 的值。这是在 JavaScript 中创建新对象的最简单且首选的方法,称为对象文字语法。

属性名称通常不需要引用,除非它们是保留字,或者它们包含空格或特殊字符(除字母,数字 _$ 字符之外的任何字符),或者如果它们以数字开头,如以下示例:

var person = {
    "first name": "Peter",
    "current age": 28,
    gender: "Male"
};

注意: 从 ECMAScript 5 开始,保留字可以作为对象的属性名而不用引用。但是,你应该避免这样做以获得更好的兼容性。

访问对象的属性

要访问或获取属性的值,可以使用点(.)或方括号([])表示法,如以下示例所示:

var book = {
    "name": "Harry Potter and the Goblet of Fire",
    "author": "J. K. Rowling",
    "year": 2000
};

// Dot notation
document.write(book.author);  // Prints: J. K. Rowling

// Bracket notation
document.write(book["year"]); // Prints: 2000

点符号更易于读写,但不能始终使用。如果属性的名称无效(即如果它包含空格或特殊字符),则不能使用点表示法; 你必须使用括号表示法,如下例所示:

var book = {
    name: "Harry Potter and the Goblet of Fire",
    author: "J. K. Rowling",
    "publication date": "8 July 2000"
};

// Bracket notation
document.write(book["publication date"]); // Prints: 8 July 2000

方括号表示法比点符号提供了更多的灵活性。它还允许你将属性名称指定为变量而不仅仅是字符串文字,如下例所示:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

var key = prompt("Enter any property name to get its value");
alert(person[key]); // Outputs: Peter (if enter "name")

循环对象的属性

你可以使用 for...in 循环遍历对象的键值对。此循环专门针对迭代对象的属性进行了优化。这是一个例子:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

// Iterating over object properties
for(var i in person) {  
    document.write(person[i] + "<br>"); // Prints: name, age and gender
}

设置对象的属性

同样,你可以使用点(.)或括号([])表示法设置新属性或更新现有属性,如以下示例所示:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

// Setting a new property
person.country = "United States";
document.write(person.country); // Prints: United States

person["email"] = "peterparker@mail.com";
document.write(person.email); // Prints: peterparker@mail.com

// Updating existing property
person.age = 30;
document.write(person.age); // Prints: 30

person["name"] = "Peter Parker";
document.write(person.name); // Prints: Peter Parker

删除对象的属性

delete 运算符可以被用来从一个对象中完全删除属性。删除是从对象中实际删除属性的唯一方法。将属性设置为 undefinednull 仅更改属性的值。它不会从对象中删除属性。

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

// Deleting property
delete person.age;
alert(person.age); // Outputs: undefined

注意: delete 运算符仅删除一个对象的属性或数组元素。它对变量或声明的函数没有影响。但是,你应该避免使用 delete 操作符来删除数组元素,因为它不会更改数组的长度,只会在数组中留下一个洞。

调用对象的方法

你可以像访问属性一样访问对象的方法 - 使用点表示法或使用方括号表示法。这是一个例子:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

person.displayName(); // Outputs: Peter
person["displayName"](); // Outputs: Peter

对数值和引用操作的区别

JavaScript 对象是引用类型,意味着当你复制它们时,你实际上只是复制对该对象的引用。而字符串和数字等原始值则作为整体值分配或复制。为了更好地理解这一切,让我们看看以下示例:

var message = "Hello World!";

var greet = message; // Assign message variable to a new variable
greet = "Hi, there!";

document.write(message);  // Prints: Hello World!
document.write(greet);  // Prints: Hi, there!

在上面的例子中,我们制作了一个变量的副本 message 并更改了该副本的值(即变量 greet)。这两个变量保持不同和独立。但是,如果我们对一个对象做同样的事情,我们将得到一个不同的结果,如下例所示:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

var user = person; // Assign person variable to a new variable
user.name = "Harry";

document.write(person.name);  // Prints: Harry
document.write(user.name);  // Prints: Harry

你可以清楚地看到,对 user 变量所做的任何更改也会更改 person 变量; 它发生是因为两个变量都引用同一个对象。因此,简单地复制对象实际上并不克隆它,而是复制对该对象的引用。