如何将字符串嵌套数组路径转为对应属性值（Rest Countries API场景）

方案一：通用嵌套属性取值函数 #

如果需要支持任意嵌套路径的取值，可以写一个原生JS函数来解析路径，无需依赖第三方库：

function getNestedValue(obj, path) {
  // 统一路径格式：把['xxx']替换成.xxx
  const cleanPath = path.replace(/\['([^\]]+)'\]/g, '.$1');
  // 拆分路径为数组
  const pathSegments = cleanPath.split('.').filter(seg => seg);
  
  // 逐层遍历对象获取属性值
  return pathSegments.reduce((currentObj, segment) => {
    return currentObj?.[segment] ?? null;
  }, obj);
}

使用示例：

// 假设从API拿到的国家数据存在countries数组里
// 当前要过滤的路径是字符串形式的"['name']['common']"
const targetPath = "['name']['common']";
const searchKeyword = 'china';

const filtered = countries.filter(country => {
  const value = getNestedValue(country, targetPath);
  return value?.toLowerCase().includes(searchKeyword.toLowerCase());
});

方案二：针对固定属性直接判断 #

因为你只需要处理name.common、region、fifa三个固定属性，这种场景下直接用条件判断更简单高效，也能避免路径解析的潜在问题：

// 假设filterType是用户选择的过滤类型：'name' | 'region' | 'fifa'
const filterType = 'name';
const searchKeyword = 'asia';

const filtered = countries.filter(country => {
  let targetValue;
  switch(filterType) {
    case 'name':
      targetValue = country.name?.common;
      break;
    case 'region':
      targetValue = country.region;
      break;
    case 'fifa':
      targetValue = country.fifa;
      break;
    default:
      targetValue = '';
  }
  return targetValue?.toLowerCase().includes(searchKeyword.toLowerCase());
});

为什么你之前的写法无效？ #

你尝试用字符串拼接item + "['name']['common']"时，JS会先把item对象转换为字符串[object Object]，最终得到的只是一个拼接后的字符串，而非执行对象属性访问操作。要获取嵌套属性，必须通过对象的原生属性访问语法（.或[]），不能靠字符串拼接实现。

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