如何在JavaScript中提取JSON中的所有DISTANCE值到独立数组？

首先，咱们先搞定JSON.parse()报错的问题——这通常是因为你拿到的响应内容不是纯有效JSON，比如带了BOM头、多余的空格，或者API返回的格式本身有问题。先按这个思路排查：

第一步：排查并修复JSON解析错误 #

1. 先看原始响应内容：把API返回的文本直接打印出来，看看有没有奇怪的字符（比如开头的，这是UTF-8 BOM头）。

   // 假设你用fetch获取数据的话
   fetch('你的API地址')
     .then(res => res.text()) // 先拿文本，不是直接json()
     .then(responseText => {
       console.log('原始响应:', responseText); // 打印出来检查
     });
   

2. 用try-catch捕获错误细节：这样能精准知道哪里出问题了，比如格式错误还是内容无效。

   let parsedData;
   try {
     // 如果有BOM头，先去掉
     const cleanedText = responseText.replace(/^\uFEFF/, '');
     parsedData = JSON.parse(cleanedText);
   } catch (error) {
     console.error('JSON解析失败:', error.message);
     console.error('出问题的原始内容:', responseText);
     return; // 解析失败就别往下走了
   }
   

第二步：提取所有DISTANCE值 #

解析成功后，就要看你的JSON结构了，分几种常见情况：

情况1：API返回的是对象数组，每个对象都有DISTANCE字段 #

比如返回的结构是这样：

[
  {"id": 1, "DISTANCE": 150},
  {"id": 2, "DISTANCE": 220},
  {"id": 3, "DISTANCE": 80}
]

直接用map就能提取：

const distances = parsedData.map(item => item.DISTANCE);
console.log(distances); // [150, 220, 80]

情况2：JSON是嵌套结构，DISTANCE在某个子数组里 #

比如返回的是：

{
  "status": "success",
  "data": [
    {"name": "站点A", "DISTANCE": 50},
    {"name": "站点B", "DISTANCE": 75}
  ]
}

那先拿到子数组再提取：

const distances = parsedData.data.map(item => item.DISTANCE);

情况3：DISTANCE分散在多层嵌套的结构里 #

如果DISTANCE可能出现在不同层级（比如嵌套对象、深层数组），那写个递归函数来遍历所有字段：

function getAllDistances(data) {
  let result = [];
  
  // 处理数组：遍历每个元素
  if (Array.isArray(data)) {
    data.forEach(item => {
      result = result.concat(getAllDistances(item));
    });
    return result;
  }
  
  // 处理对象：遍历每个键
  if (typeof data === 'object' && data !== null) {
    for (const key in data) {
      if (key === 'DISTANCE') {
        result.push(data[key]);
      } else {
        result = result.concat(getAllDistances(data[key]));
      }
    }
    return result;
  }
  
  // 不是对象/数组，直接返回空数组
  return result;
}

// 示例使用
const nestedData = {
  "layer1": {
    "layer2": [{"DISTANCE": 10}, {"other": {"DISTANCE": 20}}]
  },
  "DISTANCE": 30
};
const distances = getAllDistances(nestedData);
console.log(distances); // [30, 10, 20]

按照这个流程，先搞定解析错误，再根据你的JSON结构选对应的提取方式，应该就能拿到所有DISTANCE值组成的数组了。

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