JavaScript 数组 entries() 方法

JavaScript entries() 语法

entries() 是 JavaScript 数组的一个方法，它会返回一个迭代器对象（Array Iterator），该对象包含数组中每个元素对应的 “键” 和 “值” （也叫 “键值对”）。

语法：

arr.entries()

说明：

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

JavaScript entries() 摘要

JavaScript entries() 示例

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

示例 1：entries() 基本用法

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

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

运行结果如下。

Object [Array Iterator] {}
[ 0, '红' ]
[ 1, '绿' ]
[ 2, '蓝' ]

分析：

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

示例 2：带空槽的数组使用 entries()

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

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

运行结果如下。

Object [Array Iterator] {}

[ 0, '红' ]
[ 1, '绿' ]
[ 2, undefined ]
[ 3, undefined ]
[ 4, '蓝' ]

分析：

entries() 方法不会跳过数组的空槽元素。对于空槽元素的值，entries() 会将其视为 undefined 处理。

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

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

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

运行结果如下。

Object [Array Iterator] {}

分析：

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

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

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

运行结果如下。

[
  [ 0, '红' ],
  [ 1, '绿' ],
  [ 2, undefined ],
  [ 3, undefined ],
  [ 4, '蓝' ]
]

分析：

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

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

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

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

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

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

const arr = ["red", "green", "blue"];

// 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
red
green
blue
[ 0, 'red' ]
[ 1, 'green' ]
[ 2, 'blue' ]