为什么这段JS代码报Uncaught TypeError: Cannot read properties of null (reading 'push')错误？

该报错核心是调用push方法的notesObj为null，只有数组类型存在push实例方法，非数组（包括null、对象、字符串、数字等）调用该方法都会抛出错误，触发问题的常见场景如下：

• localStorage中存储的notes字段内容不是合法的数组JSON格式：比如之前调试时往notes存过对象、纯字符串、布尔值，或是存储了字符串"null"，JSON.parse(notes)执行后返回结果不是数组，甚至直接返回null
• 未显式声明notesObj变量，若全局作用域下存在同名的notesObj被赋值为null，也会触发报错
• 原代码的清空逻辑也存在错误：addtxt = ""是把DOM节点变量直接赋值为空字符串，无法清空输入框内容，后续调用addtxt.value会抛出额外报错

修复后完整代码 #

console.log("HI");
const addbtn = document.getElementById("addbtn");
// 提前判断按钮DOM是否存在，避免监听报错
if (addbtn) {
  addbtn.addEventListener("click", function (e) {
    const addtxt = document.getElementById("addtxt");
    // 判断输入框DOM是否存在
    if (!addtxt) return;
    const notes = localStorage.getItem("notes");
    // 显式声明notesObj，默认兜底为空数组
    let notesObj = [];

    try {
      if (notes !== null) {
        const parsedVal = JSON.parse(notes);
        // 校验解析结果必须是数组才赋值，否则继续使用兜底的空数组
        if (Array.isArray(parsedVal)) {
          notesObj = parsedVal;
        }
      }
    } catch (err) {
      // JSON解析失败时直接使用兜底空数组
      notesObj = [];
    }

    notesObj.push(addtxt.value);
    localStorage.setItem("notes", JSON.stringify(notesObj));
    // 正确清空输入框内容
    addtxt.value = "";
    console.log(notesObj);
  });
}

核心修改说明 #

• 显式使用let声明notesObj变量，避免全局作用域污染
• 新增JSON.parse异常捕获逻辑，避免存储的JSON格式不合法导致逻辑中断
• 新增数组类型校验Array.isArray()，只有解析结果为数组时才赋值，其他场景全部兜底为空数组
• 修复输入框清空逻辑，改为修改DOM节点的value属性实现内容清空
• 新增DOM节点存在性判断，避免页面无对应节点时抛出额外报错

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