好的,没问题。我们来把 .keys()
和 .values()
这两个重要的方法系统地梳理一遍,并总结成一份清晰的、适合面试复习的文档。
JavaScript中 .keys()
和 .values()
的全面解析
在 JavaScript 中,.keys()
和 .values()
是用于遍历数据结构中“键”和“值”的常用方法。然而,它们的具体行为和返回类型在不同的数据结构中存在显著差异。理解这些差异是掌握 JavaScript 核心基础的关键。
核心摘要
Map
,Array
,Set
: 拥有 实例方法.keys()
和.values()
,返回的是一个迭代器(Iterator),通常与for...of
循环结合使用。Object
: 没有实例方法,需要使用 静态方法Object.keys()
和Object.values()
,返回的是一个数组(Array)。
一、Map
Map
是一个键值对的集合,其 .keys()
和 .values()
的行为最符合直觉。
Map.prototype.keys()
- 返回值:一个包含所有
key
的迭代器。 - 顺序:按照插入顺序排列。
- 用途:当你只关心
Map
中有哪些键时使用。
javascript
const userMap = new Map([
['name', 'Mrlonely'],
['age', 18]
]);
for (const key of userMap.keys()) {
console.log(key); // 依次打印: 'name', 'age'
}
Map.prototype.values()
- 返回值:一个包含所有
value
的迭代器。 - 顺序:同样按照插入顺序排列。
- 用途:当你只关心
Map
中存储了哪些值时使用。
javascript
for (const value of userMap.values()) {
console.log(value); // 依次打印: 'Mrlonely', 18
}
二、Array
数组是一种特殊的、以数字为键的对象。
Array.prototype.keys()
- 返回值:一个包含数组所有索引(index)的迭代器。
- 用途:当你需要遍历数组的索引时。
javascript
const fruits = ['Apple', 'Banana'];
for (const index of fruits.keys()) {
console.log(index); // 依次打印: 0, 1
}
Array.prototype.values()
- 返回值:一个包含数组所有元素值的迭代器。
- 用途:这是遍历数组元素的最标准方法之一。
for (const value of fruits)
是这个方法的语法糖。
javascript
const fruitValues = fruits.values(); // 得到迭代器
for (const value of fruitValues) {
console.log(value); // 依次打印: 'Apple', 'Banana'
}
三、Set
Set
只存储唯一的值,没有键值对的概念,因此它的 .keys()
和 .values()
行为很特殊。
Set.prototype.keys()
- 返回值:一个包含
Set
中所有元素值的迭代器。 - 别名:为了与
Map
的 API 保持一致性,.keys()
方法存在,但它的行为和.values()
完全一样。 - 顺序:按照插入顺序排列。
javascript
const uniqueNums = new Set([1, 2, 1, 3]);
for (const key of uniqueNums.keys()) {
console.log(key); // 依次打印: 1, 2, 3
}
Set.prototype.values()
- 返回值:一个包含
Set
中所有元素值的迭代器。 - 行为:与
.keys()
方法完全相同。
javascript
for (const value of uniqueNums.values()) {
console.log(value); // 依次打印: 1, 2, 3
}
四、Object
普通对象(Object Literals)自身没有 .keys()
或 .values()
实例方法,必须使用 Object
构造函数的静态方法来操作。
Object.keys(obj)
- 返回值:一个包含对象所有自身可枚举属性键的数组 (Array)。
- 关键点:
- 返回的是数组,不是迭代器。
- 只包含自身的键,不包括原型链上的。
- 只包含可枚举的键(Symbol 类型的键会被忽略)。
javascript
const car = {
make: 'Tesla',
model: 'Model Y'
};
const carKeys = Object.keys(car);
console.log(carKeys); // ['make', 'model'] (这是一个数组)
Object.values(obj)
- 返回值:一个包含对象所有自身可枚举属性值的数组 (Array)。
- 关键点:与
Object.keys()
对应,返回的是与键顺序一致的值数组。
javascript
const carValues = Object.values(car);
console.log(carValues); // ['Tesla', 'Model Y'] (这是一个数组)
总结对比表
数据结构 | 方法 | 如何调用 | 返回类型 | 返回内容 |
---|---|---|---|---|
Map | .keys() | instance.keys() | Iterator | 所有键(按插入顺序) |
.values() | instance.values() | Iterator | 所有值(按插入顺序) | |
Array | .keys() | instance.keys() | Iterator | 所有索引 |
.values() | instance.values() | Iterator | 所有元素值 | |
Set | .keys() | instance.keys() | Iterator | 所有值 (同.values() ) |
.values() | instance.values() | Iterator | 所有值 (同.keys() ) | |
Object | .keys() | Object.keys(instance) | Array | 自身可枚举的字符串键 |
.values() | Object.values(instance) | Array | 自身可枚举的属性值 |