ES6 数组的扩展之 entries() 方法

2024-02-02 05:06:33

前言

在之前的文章中，我们学习了 ES6 数组的扩展方法“扩展运算符(...)”，它可以轻松地将多个数组合并为一个新的数组。而本文将重点介绍 ES6 数组的另外三个实例方法：entries()、keys() 和 values()，它们可以帮助我们更轻松地迭代数组中的元素，从而实现更灵活的数据处理操作。

entries() 方法

entries() 方法返回一个新的数组迭代器对象，该迭代器对象包含数组中每个元素及其索引组成的键值对。这使得我们可以使用 for...of 循环或其他迭代方法轻松地遍历数组中的键值对。

const colors = ['red', 'green', 'blue'];

// 使用 for...of 循环迭代数组中的键值对
for (const [index, color] of colors.entries()) {
  console.log(`Index: ${index}, Color: ${color}`);
}

输出结果：

Index: 0, Color: red
Index: 1, Color: green
Index: 2, Color: blue

实例

1. 获取数组元素的索引和值：

const colors = ['red', 'green', 'blue'];

for (const [index, color] of colors.entries()) {
  console.log(`Index: ${index}, Color: ${color}`);
}

输出：

Index: 0, Color: red
Index: 1, Color: green
Index: 2, Color: blue

2. 使用 entries() 方法和数组解构语法来交换数组中的元素：

const colors = ['red', 'green', 'blue'];

// 使用 entries() 方法获取数组的键值对迭代器
const entries = colors.entries();

// 使用数组解构语法交换数组中的元素
for (const [index, color] of entries) {
  if (index === 0) {
    colors[index] = colors[1];
  } else if (index === 1) {
    colors[index] = colors[0];
  }
}

console.log(colors); // ['green', 'red', 'blue']

3. 使用 entries() 方法和 Array.from() 方法将数组转换为对象：

const colors = ['red', 'green', 'blue'];

// 使用 entries() 方法获取数组的键值对迭代器
const entries = colors.entries();

// 使用 Array.from() 方法将键值对迭代器转换为对象
const colorsObject = Object.fromEntries(entries);

console.log(colorsObject); // { 0: 'red', 1: 'green', 2: 'blue' }