如何通过字符串索引路径获取数组中的指定元素

完全可以通过该字符串路径取出目标元素，以下提供两种可行方案：

方案1：直接使用eval（仅适用于路径完全可信的场景） #

如果你的路径字符串是完全可控、没有用户输入的场景，最简单的实现方式是直接拼接后通过eval执行：

const str = "[0].subArray[2]"
const arr = [
  { subArray: [1, 2, 3, 4, 5] }, 
  { subArray: [32, 321, 11] }
];

const result = eval(`arr${str}`);
console.log(result); // 输出3

注意：该方案存在代码注入风险，如果路径包含用户输入的不可信内容，绝对不要使用该方案。

方案2：手动解析路径（安全通用方案） #

如果需要兼容不可信路径输入，可以自行解析路径字符串逐层取值，避免执行任意代码：

const str = "[0].subArray[2]"
const arr = [
  { subArray: [1, 2, 3, 4, 5] }, 
  { subArray: [32, 321, 11] }
];

function getValueByPath(target, path) {
  // 拆分路径为键名数组，过滤空字符串
  const keyList = path.split(/\[|\]\.?|\./).filter(Boolean);
  // 逐层遍历取值
  return keyList.reduce((currentValue, key) => {
    // 数字索引转为数字类型
    const formattedKey = /^\d+$/.test(key) ? Number(key) : key;
    return currentValue ? currentValue[formattedKey] : undefined;
  }, target);
}

const result = getValueByPath(arr, str);
console.log(result); // 输出3

注意事项 #

• 路径不存在时上述第二种方案会返回undefined，不会抛出异常，你也可以根据业务需求添加不存在时的默认返回或者错误抛出逻辑
• 如果你的业务场景中存在字符串类型的纯数字键名，可以调整数字转换的逻辑适配需求

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