Headers.forEach只传值和索引,不传键名,故key为undefined;正确遍历键值对须用entries()配合for...of或Array.from()。

Headers.forEach 不能直接用在 fetch 响应头的原始 Headers 实例上
Fetch 返回的 response.headers 是一个只读的 Headers 对象,它实现了可迭代协议(Symbol.iterator),但它的 forEach 方法**不接收键值对参数**——这是最常见的误解来源。你写 headers.forEach((value, key) => {...}) 会发现 key 总是 undefined,因为原生 Headers.prototype.forEach 只传入 value 和 index(不是键名)。
正确遍历 Headers 键值对的两种可靠方式
必须绕过 forEach 的限制,改用支持键值对的迭代方式:
- 用
for...of配合entries():最直观,兼容性好(Chrome 42+、Firefox 44+、Safari 10.1+) - 转成数组后用
Array.from(headers.entries()),再调forEach:适合需要链式操作或兼容极老环境(但实际已无必要)
示例:
fetch('/api/data')
.then(response => {
const headers = response.headers;
// ✅ 正确:entries() 返回 [key, value] 元组
for (const [key, value] of headers.entries()) {
console.log(key, '=', value);
}
// ✅ 或者转数组后 forEach
Array.from(headers.entries()).forEach(([key, value]) => {
console.log(key, '=', value);
});
});
为什么 headers.forEach((v, k) => {}) 中 k 是 undefined
Headers.prototype.forEach 的签名是 forEach(callback(value, index, headers), thisArg),它**不提供键名**。规范明确要求它只传递当前 header 值和数字索引(从 0 开始)。即使你写两个参数,第二个也永远是索引,不是键名。这个设计和 Map.prototype.forEach 不同,容易混淆。
立即学习“前端免费学习笔记(深入)”;
- 错误写法:
headers.forEach((v, k) => console.log(k))→ 输出 0, 1, 2… - Headers 没有类似
Object.keys()的方法,也不能用Object.entries() - 想按字母序遍历?得先
Array.from(headers.entries()).sort()
注意 Headers 的大小写不敏感与重复键处理
HTTP 头名是大小写不敏感的,但 Headers 对象内部可能保留原始大小写;更重要的是,同一个头名出现多次时(如多个 Set-Cookie),entries() 会返回**所有条目**,包括重复键。而 get('set-cookie') 只返回第一个值,getAll('set-cookie') 才返回全部。
- 遍历时看到多个
set-cookie是正常行为,不是 bug - 不要依赖
entries()的顺序 —— 规范未保证顺序,各浏览器基本按写入顺序,但不可强依赖 - 如果只需要特定头,优先用
get()或has(),比遍历高效得多
forEach 的名字带偏;真正要“遍历键值对”,就认准 entries() + for...of 这一对组合。其他方式要么错,要么绕远。



















