JavaScript 对象

JavaScript 对象是什么？

在 JavaScript 中，对象是一种专门用于存储 “键值对” 的数据结构。对象可以看成是现实世界事物的一种抽象。比如 “人” 这个对象，可以包含姓名、年龄、性别等属性。

如果想要创建一个对象，常用的方式有 2 种：（1）对象字面量；（2）构造函数。

1. 对象字面量

在 JavaScript 中，我们可以使用一对大括号 “{}” 来创建一个对象。这种方式也叫做 “对象字面量”。

语法：

const 变量名 = {
    属性1: 值1,
    属性2: 值2,
    属性3: 值3,
    ……
};

分析：

“{}” 内包含 0 个或多个键值对，键值对之间使用 “,” （英文逗号） 隔开，然后 “键” 与 “值” 之间使用 “:” （英文冒号） 隔开。

在实际开发中，大多数情况下，我们都是使用对象字面量这种方式来创建对象。

示例 1：创建简单对象

const user = {
    name: "Jack",
    age: 20
};
console.log(user.name);
console.log(user.age);

运行结果如下。

Jack
20

分析：

在这个例子中，我们创建了一个名为 “user” 的对象，该对象包含 2 个属性：name 和 age。user.name 表示获取 user 对象的 name 属性，这个我们在下面会讲解到。

对于一个对象来说，它内部的键值对之间必须要使用 “,”（英文逗号）来隔开。需要注意的是，最后一个键值对的后面可以加 “,”，也可以不加 “,”。下面 2 种写法都是可行的。

// 写法 1
const user = {
    name: "Jack",
    age: 20      // 无逗号
};

// 写法 2
const user = {
    name: "Jack",
    age: 20,      // 有逗号
};

此外，对象的属性也可以是一个字符串。对于这个例子来说，下面 2 种写法是等价的：

// 写法 1
const user = {
    name: "Jack",
    age: 20 
};

// 写法 2
const user = {
    "name": "Jack",
    "age": 20 
};

需要注意的是，如果属性名包含特殊字符（如 -、+、* 等），则必须要使用字符串这种方式。

// 正确
const user = {
    "first-name": "Jack",
    age: 20 
};

// 错误
const user = {
    first-name: "Jack",
    age: 20 
};

示例 2：创建复杂对象

const user = {
    name: "Jack",
    hobbies: ["Coding", "Reading", "Travel"],
    contact: {
        email: "lvyenet@qq.com",
        phone: "13266668888",
    }
};
console.log(user.hobbies[0]);
console.log(user.contact.email);

运行结果如下。

Coding
lvyenet@qq.com

分析：

对象本身是可以非常复杂的，它属性的值可以是一个数组，也可以是一个对象。当然了，里面还可以继续复杂嵌套。

2. 构造函数

在 JavaScript 中，我们还可以使用构造函数的方式来创建一个空对象，然后再为该对象添加属性。

语法：

const 变量名 = new Object();

说明：

这种创建对象的方式不够直观，在实际开发中用得很少，小伙伴们简单了解一下即可。

示例 3：使用构建函数

const user = new Object();
user.name = "Jack";
user.age = 20;

console.log(user.name);
console.log(user.age);

运行结果如下。

Jack
20

JavaScript 对象的属性

在 JavaScript 中，如果想要获取或修改对象的属性，主要有 2 种方式：（1）点运算符；（2）方括号表示法。

1. 点运算符

在 JavaScript 中，如果想要获取或修改对象的属性，最简单的方式就是使用 “点运算符”。

语法：

对象名.属性名

说明：

点运算符是 “的” 的意思，比如 user.name 表示 “user 对象的 name 属性”。

示例 4：使用 “.” 获取对象属性

const product = {
    type: "手机",
    brands: {
        name: "小米",
        price: 4999
    }
};

console.log(product.type);
console.log(product.brands.price);

运行结果如下。

手机
4999

示例 5：修改对象属性

const product = {
    type: "手机",
    brands: {
        name: "小米",
        price: 4999
    }
};

// 修改属性值
product.brands.price = 7999;

// 获取属性值
console.log(product.brands.price);

运行结果如下。

7999

2. 方括号表示法

在 JavaScript 中，我们还可以使用 “[]”（方括号）这种表示法，来获取和修改对象的属性。

语法：

对象名["属性名"]

说明：

方括号这种方式，“[]” 内部必须是一个字符串。比如 user 有一个 name 属性，那么：

// 正确
user["name"]

// 错误
user[name]

在实际开发中，大多数情况下我们都是使用点运算符来获取和修改属性。但有些情况下必须使用方括号这种方式，比如：

• 当属性名包含 “空格或特殊字符” 时，比如：user["first name"]。
• 当属性名是一个 “变量” 时，比如：user[myKey]。

示例 6：使用 “[]” 获取对象属性

const user = {
    "first name": "Jack",
    "age": 20
};
console.log(user["first name"]);
console.log(user["age"]);

运行结果如下。

Jack
20

分析：

在这个例子中，user 对象有 2 个属性："first name" 和 "age"。有小伙伴会问，属性名我能否不使用引号呢？比如写成下面这样：

const user = {
    first name: "Jack",
    age: 20
};

答案是不行的。这是因为 “first name” 包含了空格，它并不是一个有效的变量名。对于包含特殊字符的属性，必须要使用引号括起来。

JavaScript 对象的方法

在 JavaScript 中，对象（Object）提供了非常多的方法，如下表所示。等学完这一章，小伙伴们可以自行查阅学习一下。