网站
引入
前面学了变量可以保存单个数据，但现实中很多数据是有关联的。
比如一个用户有名字、年龄、邮箱，如果分成三个变量保存，管理起来很麻烦。对象可以把这些相关数据放到一起，用键值对的方式组织。
正文
定义
定义
对象是一种用键值对保存数据的数据结构，键是属性名，值是对应的数据。
创建对象
对象字面量
最常用的方式，用 {} 直接写出来。
let user = {
name: "Tom",
age: 18,
email: "[email protected]"
};每个键值对用 : 分隔，多个键值对用 , 分隔。
new Object()
也可以用 new Object() 创建空对象，再逐个添加属性。
let user = new Object();
user.name = "Tom";
user.age = 18;
user.email = "[email protected]";两种写法效果一样，实际开发中更常用对象字面量。
访问属性
点语法
let user = {
name: "Tom",
age: 18
};
console.log(user.name);
console.log(user.age);方括号语法
let user = {
name: "Tom",
age: 18
};
console.log(user["name"]);
console.log(user["age"]);方括号里要写字符串形式的属性名。
当属性名保存在变量中时，只能用方括号语法。
let key = "name";
console.log(user[key]);修改和添加属性
对象创建后，可以修改已有属性，也可以添加新属性。
let user = {
name: "Tom",
age: 18
};
user.age = 19;
user.email = "[email protected]";
console.log(user);删除属性
用 delete 关键字可以删除对象的属性。
let user = {
name: "Tom",
age: 18,
email: "[email protected]"
};
delete user.email;
console.log(user);方法
对象里的属性如果是一个函数，就叫方法。
let user = {
name: "Tom",
sayHello: function () {
console.log("你好，我是" + this.name);
}
};
user.sayHello();ES6 之后有更简洁的方法写法。
let user = {
name: "Tom",
sayHello() {
console.log("你好，我是" + this.name);
}
};
user.sayHello();遍历对象
for…in
for…in 可以遍历对象的所有属性名。
let user = {
name: "Tom",
age: 18,
email: "[email protected]"
};
for (let key in user) {
console.log(key);
console.log(user[key]);
}Object.keys()
返回一个数组，包含对象所有属性名。
let user = {
name: "Tom",
age: 18
};
let keys = Object.keys(user);
console.log(keys);Object.values()
返回一个数组，包含对象所有属性值。
let user = {
name: "Tom",
age: 18
};
let values = Object.values(user);
console.log(values);Object.entries()
返回一个数组，每个元素是 [键, 值] 的数组。
let user = {
name: "Tom",
age: 18
};
let entries = Object.entries(user);
console.log(entries);也可以配合 for…of 遍历。
for (let [key, value] of Object.entries(user)) {
console.log(key + ": " + value);
}常见写法
| 写法 | 作用 |
|---|---|
let obj = {}; | 创建空对象 |
obj.name = "Tom"; | 添加或修改属性 |
obj.name | 用点语法读取属性 |
obj["name"] | 用方括号读取属性 |
delete obj.name; | 删除属性 |
for (let key in obj) {} | 遍历所有属性 |
Object.keys(obj) | 获取所有属性名 |
Object.values(obj) | 获取所有属性值 |
Object.entries(obj) | 获取所有键值对 |
特点
- 对象用键值对保存数据
- 键是字符串（或 Symbol），值是任意类型
- 属性可以是数据，也可以是函数（方法）
- 可以动态添加、修改、删除属性
- 点语法和方括号语法都可以访问属性
for…in遍历属性名，for…of配合Object.entries()遍历键值对
理解
可以把对象理解为一个文件夹。
文件夹里可以放很多文件，每个文件有自己的名字和内容。
对象里的属性名就是文件名，属性值就是文件内容。
需要找某个数据时，只要知道属性名就能直接拿到，不用按顺序一个个翻。
引出
理解了对象之后，可以继续学习 JS this，知道方法里的 this 到底指向谁。
也可以学习 JS 自定义对象，掌握用构造函数和 class 创建多个相似对象的方法。