如何修复Uncaught TypeError: budgetArray.push is not a function错误？

问题原因 #

报错核心是budgetArray并非数组类型——从localStorage读取并解析后的值可能是单个对象、null，或是格式错误的JSON解析结果，这类值没有push方法，因此触发TypeError。直接设为[]时是数组，能正常调用push，但会丢失历史数据。

修复方案 #

1. 初始化时强制保证数组类型 #

解析后立即校验类型，非数组则重置为空数组，同时添加异常捕获处理非法JSON：

const STORAGE_KEY = 'your-storage-key'; // 替换为你的实际存储键名
let budgetArray = [];

try {
  const storedData = window.localStorage.getItem(STORAGE_KEY);
  if (storedData) {
    const parsedData = JSON.parse(storedData);
    // 仅当解析结果是数组时才使用，否则重置为空数组
    budgetArray = Array.isArray(parsedData) ? parsedData : [];
  }
} catch (error) {
  console.error('读取预算数据失败:', error);
  // 解析出错时保持空数组，避免后续逻辑崩溃
}

2. 修正存储逻辑（storedEntry函数） #

确保存储的是完整数组，而非单个预算对象。如果之前的storedEntry直接存储单个对象，会导致下次读取时得到对象而非数组，需修改为：

function storedEntry(newBudget) {
  // 先按正确方式读取当前数组
  let budgetArray = [];
  try {
    const storedData = window.localStorage.getItem(STORAGE_KEY);
    if (storedData) {
      const parsedData = JSON.parse(storedData);
      budgetArray = Array.isArray(parsedData) ? parsedData : [];
    }
  } catch (error) {
    console.error('读取历史数据失败:', error);
  }

  // 添加新预算并重新存储整个数组
  budgetArray.push(newBudget);
  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(budgetArray));
}

3. 临时清理错误历史数据 #

如果localStorage中已存储非数组格式的数据，可在浏览器控制台执行以下代码清空错误数据（执行一次即可）：

localStorage.removeItem('your-storage-key'); // 替换为你的实际存储键名

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