嵌套JSON数组索引问题：获取agencies多raw_name值失败

• agencies数组长度不足导致未定义错误
  这是最常见的诱因：部分results对象的agencies数组仅包含1个元素（甚至为空），直接访问agencies[1].raw_name会抛出Cannot read properties of undefined (reading 'raw_name')错误，触发JavaScript代码中断，导致页面渲染异常。
  解决思路：访问前先校验数组长度，或使用可选链操作符规避报错：

  // 校验长度后拼接
  const agencyNames = [];
  if (result.agencies.length >= 1) agencyNames.push(result.agencies[0].raw_name);
  if (result.agencies.length >= 2) agencyNames.push(result.agencies[1].raw_name);
  const combinedName = agencyNames.join(' ');
  
  // 可选链简化写法
  const combinedName = `${result.agencies[0]?.raw_name || ''} ${result.agencies[1]?.raw_name || ''}`.trim();
  

• 未处理请求或解析异常
  若请求过程中出现网络故障、JSON格式错误，或遍历results时未添加异常捕获，单条数据处理出错就会导致整个脚本崩溃。
  解决思路：在XHR回调中添加错误捕获，遍历数据时用try-catch包裹核心逻辑：

  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      try {
        const data = JSON.parse(xhr.responseText);
        data.results.forEach(result => {
          try {
            // 执行拼接逻辑
            const combinedName = `${result.agencies[0]?.raw_name || ''} ${result.agencies[1]?.raw_name || ''}`.trim();
            // 页面渲染逻辑
          } catch (err) {
            console.error('单条数据处理失败:', err, result);
          }
        });
      } catch (parseErr) {
        console.error('JSON解析失败:', parseErr);
      }
    } else {
      console.error('请求失败:', xhr.status);
    }
  };
  xhr.onerror = function() {
    console.error('网络请求错误');
  };
  

• 拼接内容破坏DOM渲染
  若拼接后的字符串包含未转义的特殊字符（如HTML标签），直接插入DOM会导致页面结构错乱。
  解决思路：插入DOM前转义特殊字符，或使用textContent替代innerHTML（自动处理转义）：

  // 手动转义特殊字符
  function escapeHtml(str) {
    return str.replace(/[&<>"']/g, match => {
      const escapeMap = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
      return escapeMap[match];
    });
  }
  
  // 安全插入DOM
  const safeName = escapeHtml(combinedName);
  document.getElementById('target').textContent = safeName;
  

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