如何通过索引精准引用数组元素？解决循环索引获取偏差问题

一、一维数组：拿到每个元素的真实索引 #

方法1：用Array.prototype.entries() #

这是最直接的做法，entries()返回的迭代器会每次给出[索引, 元素值]的数组，解构就能直接拿到索引：

const array = [1, 0, 1, 1, 0];
for (const [index, el] of array.entries()) {
  console.log(index); // 依次输出 0, 1, 2, 3, 4
}

方法2：传统for循环 #

如果习惯用普通循环，直接通过计数器访问索引就行：

const array = [1, 0, 1, 1, 0];
for (let i = 0; i < array.length; i++) {
  console.log(i); // 依次输出 0, 1, 2, 3, 4
  // 对应的元素值是 array[i]
}

方法3：forEach的索引参数 #

forEach的回调函数自带第二个参数，就是当前元素的索引：

const array = [1, 0, 1, 1, 0];
array.forEach((el, index) => {
  console.log(index); // 依次输出 0, 1, 2, 3, 4
});

二、多维数组：获取元素的完整索引路径 #

如果是嵌套多维数组（比如[[1,2], [3,[4,5]]]），要拿到每个元素的完整索引路径（比如元素4的索引是1,1,0），可以用递归遍历，适配任意深度的嵌套：

function traverseMultiArray(arr, parentPath = []) {
  arr.forEach((item, index) => {
    const currentPath = [...parentPath, index];
    if (Array.isArray(item)) {
      // 递归处理子数组
      traverseMultiArray(item, currentPath);
    } else {
      console.log(`元素 ${item} 的索引路径：${currentPath.join(',')}`);
      // 输出结果：
      // 元素 1 的索引路径：0,0
      // 元素 2 的索引路径：0,1
      // 元素 3 的索引路径：1,0
      // 元素 4 的索引路径：1,1,0
      // 元素 5 的索引路径：1,1,1
    }
  });
}

const multiArray = [[1,2], [3,[4,5]]];
traverseMultiArray(multiArray);

要是只需要当前层级的索引，嵌套循环也能搞定，但递归的通用性更强，不用管数组嵌套几层。

内容的提问来源于stack exchange，提问作者GheistLycis