JavaScript 数组 keys() 方法

JavaScript keys() 语法

keys() 是 JavaScript 数组的一个方法，它会返回一个迭代器对象（Array Iterator），该对象包含数组中每个元素的键。

对于数组来说，它元素对应的键本质上是它的下标。

语法：

arr.keys()

说明：

keys() 方法不接收任何参数。此外，keys() 方法不会改变原数组。

JavaScript keys() 摘要

JavaScript keys() 示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript keys() 方法是如何使用的。

示例 1：keys() 基本用法

const arr = ["红", "绿", "蓝"];
const result = arr.keys();
console.log(result);

for (let key of result) {
    console.log(key);
}

运行结果如下。

Object [Array Iterator] {}
0
1
2

分析：

keys() 会返回一个 Iterator 对象，因此我们可以使用 for of 循环来遍历它。其中，Iterator 对象和 for of 循环是 ES6 新增的概念。

示例 2：带空槽元素的数组使用 keys()

const arr = ["红", "绿", , , "蓝"];
const result = arr.keys();
console.log(result);

for (let key of result) {
    console.log(key);
}

运行结果如下。

Object [Array Iterator] {}
0
1
2
3
4

分析：

keys() 方法不会跳过数组的空槽元素，同样会记录空槽元素的下标。

示例 3：空数组使用 keys()

const arr = [];
const result = arr.keys();
console.log(result);

for (let key of result) {
    console.log(key);
}

运行结果如下。

Object [Array Iterator] {}

分析：

由于空数组不包含任何元素，它使用 keys() 生成的 Array Iterator 对象不包含任何的 “键” ，因此使用 for of 循环不会遍历出任何内容。

示例 4：将 keys() 的结果转换成数组

const arr = ["红", "绿", "蓝"];
const result = [...arr.keys()];
console.log(result);

运行结果如下。

[ 0, 1, 2 ]

分析：

想要将 keys() 的结果转换成一个数组，可以使用 ES6 扩展运算符的方式来实现。

keys()、values()、entries() 的区别

数组的 keys()、values() 和 entries() 这几个方法比较相似，它们的相同之处在于：都会返回一个 Array Iterator 对象（也叫 “迭代器” 或 “迭代器对象”），因此都可以使用 for of 循环来遍历。

keys()、values() 和 entries() 的不同之处在于它们的功能。

• keys()：获取数组所有元素的 “键”（即下标）。
• values()：获取数组所有元素的 “值”。
• entries()：获取所有元素的 “键” 和 “值”。

示例 5：keys()、values()、entries() 的区别

const arr = ["Python", "Java", "C++"];

// keys()方法
const result1 = arr.keys();
for (let key of result1) {
    console.log(key);
}

// values()方法
const result2 = arr.values();
for (let value of result2) {
    console.log(value);
}

// entries()方法
const result3 = arr.entries();
for (let item of result3) {
    console.log(item);
}

运行结果如下。

0
1
2
Python
Java
C++
[ 0, 'Python' ]
[ 1, 'Java' ]
[ 2, 'C++' ]