Javascript foreach 键值

在 Javascript 中，forEach 方法可以用来遍历数组，并且可以获取每个元素的值和索引。但是，如果你想获取元素的键值（key），怎么办呢？

传统方法

在传统的 for 循环中，我们可以通过索引来获取元素的值和键值。例如：

const myArray = ['apple', 'banana', 'orange'];

for (let i = 0; i < myArray.length; i++) {
  const element = myArray[i];
  const key = i;
  console.log(`Key: ${key}, value: ${element}`);
}

这段代码会输出：

Key: 0, value: apple
Key: 1, value: banana
Key: 2, value: orange

但是，使用 for 循环有一些缺点。首先，代码比较啰嗦，需要定义索引，然后再根据索引获取元素的值和键值。其次，如果数组中有空洞（也就是没有值的地方），for 循环会跳过这些空洞，导致元素的键值和数组的索引不一致。

forEach 方法

相比较传统的 for 循环，forEach 方法可以更加简洁和直观地遍历数组。

const myArray = ['apple', 'banana', 'orange'];

myArray.forEach((element, index) => {
  console.log(`Key: ${index}, value: ${element}`);
});

这段代码会输出：

Key: 0, value: apple
Key: 1, value: banana
Key: 2, value: orange

可以看到，forEach 方法会自动将每个元素的值和索引传递给回调函数，并且没有空洞的问题。但是，如果你想获取元素的键值，显然需要进行一些额外的处理。

解决方法

在 forEach 的回调函数中，如果你想获取元素的键值，可以通过第三个参数 array 来获取整个数组，并使用 indexOf 方法来获取元素的键值。

const myArray = ['apple', 'banana', 'orange'];

myArray.forEach((element, index, array) => {
  const key = array.indexOf(element);
  console.log(`Key: ${key}, value: ${element}`);
});

这段代码会输出：

Key: 0, value: apple
Key: 1, value: banana
Key: 2, value: orange

可以看到，使用 indexOf 方法来获取元素的键值相对比较繁琐，而且如果数组中有重复的元素，会出现错误。因此，建议在使用 forEach 方法时最好避免需要获取元素的键值的情况。如果需要获取键值，建议使用传统的 for 循环。