如何安全地从嵌套字符串化数组中提取城市名称-js教程-PHP中文网

如何安全地从嵌套字符串化数组中提取城市名称

本文讲解如何正确解析由 Google Sheets 导入的、被错误识别为字符串而非数组的嵌套数据，解决 Cannot read properties of undefined 错误，并提供健壮的遍历与解构方案。

本文讲解如何正确解析由 google sheets 导入的、被错误识别为字符串而非数组的嵌套数据，解决 `cannot read properties of undefined` 错误，并提供健壮的遍历与解构方案。

在处理从 Google Sheets 等外部源读取的数据时，一个常见陷阱是：本应为嵌套数组（如 [ [{'city': 'ny'}] ]）的数据，实际被解析为字符串形式的数组表示（如 "[{'city': 'ny'}]"）。这会导致直接使用 item[0].city 报错 TypeError: Cannot read properties of undefined (reading 'city')——因为 item 是字符串，item[0] 取的是首字符 '['，而非子数组。

更关键的是，原始数据中还存在空字符串 "" 和稀疏项（如示例中的 ,），进一步加剧了访问风险。

✅ 正确做法：先安全解析，再结构化解构

首先需将每个字符串元素尝试解析为 JavaScript 对象。由于原始字符串使用单引号（如 {'city': 'new york'}），而 JSON.parse() 仅支持双引号，需先做兼容性转换：

const rawArray = [
  "[{'city': 'new york', 'state': 'ny'}]",
  "[{'city': 'dallas', 'state': 'tx'}]",
  "",
  "[{'city': 'los angeles', 'state': 'ca'}]"
];

const cities = rawArray
  .map(str => {
    // 跳过空字符串或空白项
    if (!str || str.trim() === '') return null;

    try {
      // 将单引号替换为双引号，并补全外层 JSON 格式（如 '[{...}]' → [{...}]
      const jsonSafe = str.replace(/'/g, '"');
      const parsed = JSON.parse(jsonSafe);
      // 确保解析结果是数组且至少含一个对象
      if (Array.isArray(parsed) && parsed.length > 0 && typeof parsed[0] === 'object') {
        return parsed[0].city;
      }
    } catch (e) {
      console.warn('解析失败，跳过此项:', str, e.message);
    }
    return null;
  })
  .filter(city => city !== null); // 移除解析失败或空值

console.log(cities); // ['new york', 'dallas', 'los angeles']

? 补充说明与最佳实践

不要依赖 forEach + 直接属性访问：它不具备容错能力，遇到 undefined 或非对象类型立即崩溃。
优先使用 map + filter 组合：语义清晰，函数式风格更易测试与维护。
Google Sheets 数据导入建议：若可控数据源，应在导出时统一使用 JSON.stringify()（确保双引号）并启用「将字符串自动解析为数组」逻辑；或改用 Apps Script 的 getDataAsObjects() 等结构化方法。
扩展性考虑：若需同时提取 city 和 state，可返回对象 { city, state }，便于后续链式处理。