在 async 函数中，若在作用域内重复声明同名变量（如 const data），会遮蔽外部 let 声明的数组，导致后续调用 push() 时因 data 指向 json 对象而报错“push is not a function”。
在 async 函数中，若在作用域内重复声明同名变量（如 const data），会遮蔽外部 let 声明的数组，导致后续调用 push() 时因 data 指向 json 对象而报错“push is not a function”。
这是一个典型的变量作用域与命名冲突问题。代码中首先在全局作用域声明了 let data = []，但在 getUserData 函数内部又使用 const data = await response.json() 重新声明了一个同名变量。由于 response.json() 返回的是一个 JavaScript 对象（例如 { results: [...] }），此时函数内的 data 指向该对象，而非外部的空数组。因此执行 data.push(newUser) 实际是在对一个普通对象调用 push 方法——而对象没有该方法，从而抛出 TypeError: data.push is not a function。
✅ 正确做法是：避免变量名冲突，为 JSON 响应数据使用独立、语义化的变量名（如 userData、apiResponse），确保对原始数组 data 的引用始终有效。
以下是修复后的完整示例：
let data = [];
async function getUserData() {
try {
const response = await fetch('https://randomuser.me/api');
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
const userData = await response.json(); // ✅ 使用 userData，不覆盖外部 data
const user = userData.results[0];
const newUser = {
name: `${user.name.title} ${user.name.first}`,
money: Math.floor(Math.random() * 1000000),
};
data.push(newUser); // ✅ 此时 data 仍指向初始声明的数组
} catch (error) {
console.error('Failed to fetch or process user data:', error);
}
}
getUserData();
// 可选：验证结果
setTimeout(() => {
console.log('Collected users:', data); // 输出类似 [{ name: "Mr John", money: 428931 }]
}, 1500);
? 关键注意事项：
- ❌ 不要复用外部变量名（如 data）声明响应体；这是最常见也最隐蔽的错误来源；
- ✅ 推荐采用语义化命名：userData、apiResponse、payload 等，提升可读性与可维护性；
- ✅ 建议始终包裹 fetch 调用在 try...catch 中，捕获网络异常与解析失败；
- ✅ 注意 push() 参数：上例中 newUser 是单个对象，直接 push(newUser) 即可；若误写为 push([newUser])，则会插入嵌套数组，需根据实际数据结构调整。
通过清晰的作用域管理与严谨的错误处理，即可安全、可靠地在异步流程中累积数据到外部数组。
