JavaScript如何便捷访问深度未知的嵌套数组中的指定元素

原示例笔误修正 #

你给出的访问代码存在两处笔误，实际运行会取不到值：

• 变量名大小写不匹配：定义的变量是nestedArrays，访问时写为nestedarrays
• 索引值错误：对应g的正确索引路径是第2个数组（索引1）的第3个元素（索引2）的第1个元素（索引0），原生写法应为：

var element = nestedArrays[1][2][0];

场景1：已知目标元素的索引路径 #

如果已经明确目标对应的层级索引列表，可以封装工具函数批量处理索引，不需要手动拼接多层方括号：

// 工具函数：按索引路径取嵌套数组元素
function getByPath(arr, indexPath) {
  return indexPath.reduce((currentLevel, idx) => currentLevel?.[idx], arr);
}

// 用法示例
const nestedArrays = [
  ['a','b','c','d'],
  ['e','f',['g','h']]
];
const target = getByPath(nestedArrays, [1,2,0]);
console.log(target); // 输出 'g'

说明：代码中使用可选链?.做兼容处理，如果某层索引不存在，会直接返回undefined，不会抛出索引越界错误。如果需要兼容IE等老旧浏览器，可以把可选链替换为兼容写法：

return indexPath.reduce((currentLevel, idx) => currentLevel && currentLevel[idx], arr);

场景2：不知道索引路径，仅知道目标元素特征 #

如果不清楚目标的嵌套深度和位置，只知道目标的匹配规则（比如值等于g、满足某个判断条件），可以用深度优先遍历递归查找：

// 工具函数：按匹配规则查找嵌套数组元素
function findNested(arr, matchFn) {
  for (const item of arr) {
    if (Array.isArray(item)) {
      const found = findNested(item, matchFn);
      if (found !== undefined) return found;
    } else if (matchFn(item)) {
      return item;
    }
  }
  return undefined;
}

// 用法示例：查找值为'g'的元素
const target = findNested(nestedArrays, item => item === 'g');
console.log(target); // 输出 'g'

如果需要同时拿到目标元素的索引路径，可以修改工具函数返回路径信息：

function findNestedWithPath(arr, matchFn, parentPath = []) {
  for (let i = 0; i < arr.length; i++) {
    const currentPath = [...parentPath, i];
    const item = arr[i];
    if (Array.isArray(item)) {
      const res = findNestedWithPath(item, matchFn, currentPath);
      if (res) return res;
    } else if (matchFn(item)) {
      return {
        element: item,
        path: currentPath
      }
    }
  }
  return null;
}

// 用法示例
const res = findNestedWithPath(nestedArrays, item => item === 'g');
console.log(res.element); // 'g'
console.log(res.path); // [1,2,0]

以上方案均为纯JavaScript实现，不需要引入jQuery等额外依赖。

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