（八）前端，如此简单！---五组结构

js中有五个结构，共同构成了处理网络请求与响应的核心 API，覆盖从构建请求、管理元数据到解析数据的完整链路。

一、URL

consturl=newURL('https://api.example.com/users?id=123&name=张三#section1')url.protocol// "https:" 协议url.hostname// "api.example.com" 域名url.port// "" 空字符串 默认端口（https=443/http=80）url.pathname// "/users" 路径url.search// "?id=123&name=张三" 参数url.hash// "#section1" 哈希constparams=url.searchParams;// 操作查询参数params.append('page','1');// 增params.delete('page');// 删params.set('name','李四');// 改params.get('name');// 查console.log(params.toString());// 返回查询字符串 "id=123&name=%E5%BC%A0%E4%B8%89"

二、Headers

constheaders=newHeaders({'Content-Type':'application/json'// 初始化时设置请求体格式为 JSON});headers.append('Authorization','Bearer token');// 增加认证头headers.delete('Authorization');// 删headers.set('Content-Type','text/plain');// 改 内容类型为纯文本headers.get('Content-Type');// 查headers.has('Content-Type')// 检查是否存在 用于检查是否存在

三、Request

constrequest=newRequest("https://api.example.com/users",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({"key":"value"})})request.url// "https://api.example.com/users"request.method// "POST"request.headers// headers对象request.body// ReadableStream 可读流（不能直接查看内容）

四、Response

constresponse=newResponse(JSON.stringify({success:true,data:{id:1,name:"张三"}}),{status:200,statusText:'ok',headers:{"Content-Type":"application/json"}})// 访问 Response 属性response.status// 200response.ok// true(状态码 200-299)response.statusText// "ok"response.url// "" (实际响应中会有值"https://api.example.com/users?id=123")response.headers// headers对象response.body// ReadableStream，只能读取一次。response.bodyUsed//表示响应体是否已被读取// Response 对象只能调用一次 json() 方法// 然后 response.bodyUsed就会变成true//其他消费响应体的方法：response.text()response.arrayBuffer()response.blob()response.formData()

五、json

JSON.stringify()// json对象转字符串JSON.parse()// 字符串转json对象JSON.stringify()遇到循环引用会抛出错误（TypeError），不能处理{a:1,self:a}

• JSON.stringify() 的undefined 在对象中被忽略，在数组中转为 null

// 1. 对象属性 → 被忽略（不是 null！）JSON.stringify({a:undefined,b:1});// '{"b":1}' ← a 消失了，不是 "a":null// 2. 数组元素 → 转为 nullJSON.stringify([undefined,1]);// '[null,1]' ← 变成 null 了！// 3. 单独 undefinedJSON.stringify(undefined);// undefined ← 不是字符串 "undefined"

// 第三方库和自己代码都用了 'id'constlibId=Symbol('id');constmyId=Symbol('id');constobj={[libId]:'库的ID',[myId]:'我的ID'};// 互不干扰！console.log(libId===myId);// false 永远唯一

• JSON.parse() 不会忽略任何值，但会严格遵循 JSON 规范：

JSON.stringify() 的第二个参数可以是一个数组，用于指定对象中哪些属性需要被序列化。

constuser={name:'Alice',age:30};// 只序列化 name属性constjsonString=JSON.stringify(user,['name']);console.log(jsonString);// 输出：{"name":"Alice"}

JSON.parse() 的第二个参数 reviver 是一个函数，它在解析过程中对每个键值对调用一次。返回值将作为该键的新值。

constuser='{"name": "Alice", "age": "30"}';// JSON 规范要求键和字符串值必须使用 双引号constobj=JSON.parse(user,(key,value)=>value);// reviver 函数（此处原样返回）console.log(obj.name);// "Alice"console.log(obj.age);// "30"