JavaScript 对象 - JavaScript 教程

摘要：在本教程中，您将了解 JavaScript 对象以及如何有效地操作对象属性。

JavaScript 对象简介

在 JavaScript 中，对象是键值对的无序集合。每个键值对称为属性。

属性的键可以是字符串。属性的值可以是任何值，例如字符串、数字、数组，甚至函数。

JavaScript 提供了许多创建对象的方法。最常用的方法是使用对象字面量表示法。

以下示例使用对象字面量表示法创建一个空对象

let empty = {};Code language: JavaScript (javascript)

要创建具有属性的对象，请在花括号内使用 key:value。例如，以下创建了一个新的 person 对象

let person = {
    firstName: 'John',
    lastName: 'Doe'
};Code language: JavaScript (javascript)

person 对象具有两个属性 firstName 和 lastName，它们的值分别为 'John' 和 'Doe'。

当对象具有多个属性时，使用逗号 (,) 来分隔它们，就像上面的示例一样。

访问属性

要访问对象的属性，可以使用两种表示法之一：点表示法和数组式表示法。

1) 点表示法 (.)

以下说明如何使用点表示法访问对象的属性

objectName.propertyNameCode language: CSS (css)

例如，要访问 person 对象的 firstName 属性，可以使用以下表达式

person.firstNameCode language: CSS (css)

此示例创建了一个 person 对象，并将名字和姓氏显示在控制台中

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

console.log(person.firstName);
console.log(person.lastName);Code language: JavaScript (javascript)

2) 数组式表示法 ( [])

以下说明如何通过数组式表示法访问对象属性的值

objectName['propertyName']Code language: CSS (css)

例如

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

console.log(person['firstName']);
console.log(person['lastName']);Code language: JavaScript (javascript)

当属性名称包含空格时，需要将其放在引号内。例如，以下 address 对象具有 'building no' 作为属性

let address = {
    'building no': 3960,
    street: 'North 1st street',
    state: 'CA',
    country: 'USA'
};
Code language: JavaScript (javascript)

要访问 'building no' 属性，需要使用数组式表示法

address['building no'];Code language: CSS (css)

如果使用点表示法，将出现错误

address.'building no';Code language: JavaScript (javascript)

错误

SyntaxError: Unexpected stringCode language: JavaScript (javascript)

请注意，在对象属性名称中使用空格不是一个好的做法。

从不存在的属性读取将导致 未定义。例如

console.log(address.district);Code language: CSS (css)

输出

undefinedCode language: JavaScript (javascript)

修改属性的值

要更改属性的值，请使用赋值运算符 (=)。例如

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

person.firstName = 'Jane';

console.log(person);Code language: JavaScript (javascript)

输出

{ firstName: 'Jane', lastName: 'Doe' }Code language: CSS (css)

在此示例中，我们将 person 对象的 firstName 属性的值从 'John' 更改为 'Jane'。

向对象添加新属性

与 Java 和 C# 等其他编程语言中的对象不同，您可以在对象创建后向对象添加属性。

以下语句向 person 对象添加 age 属性，并为其赋值 25

person.age = 25;

删除对象的属性

要删除对象的属性，请使用 delete 运算符

delete objectName.propertyName;Code language: JavaScript (javascript)

以下示例从 person 对象中删除 age 属性

delete person.age;Code language: JavaScript (javascript)

如果尝试重新访问 age 属性，将获得 未定义 值。

检查属性是否存在

要检查属性是否在对象中存在，请使用 in 运算符

propertyName in objectName

如果 propertyName 在 objectName 中存在，in 运算符将返回 true。

以下示例创建了一个 employee 对象，并使用 in 运算符来检查 ssn 和 employeeId 属性是否在对象中存在

let employee = {
    firstName: 'Peter',
    lastName: 'Doe',
    employeeId: 1
};

console.log('ssn' in employee);
console.log('employeeId' in employee);Code language: JavaScript (javascript)

输出

false
trueCode language: JavaScript (javascript)

总结

对象是键值对的集合。
使用点表示法 ( .) 或数组式表示法 ([]) 来访问对象的属性。
使用 delete 运算符从对象中删除属性。
使用 in 运算符来检查属性是否在对象中存在。

本教程对您有帮助吗？