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

js中有五个结构共同构成了处理网络请求与响应的核心 API覆盖从构建请求、管理元数据到解析数据的完整链路。一、URLconsturlnewURL(https://api.example.com/users?id123name张三#section1)url.protocol// https: 协议url.hostname// api.example.com 域名url.port// 空字符串 默认端口https443/http80url.pathname// /users 路径url.search// ?id123name张三 参数url.hash// #section1 哈希constparamsurl.searchParams;// 操作查询参数params.append(page,1);// 增params.delete(page);// 删params.set(name,李四);// 改params.get(name);// 查console.log(params.toString());// 返回查询字符串 id123name%E5%BC%A0%E4%B8%89二、HeadersconstheadersnewHeaders({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)// 检查是否存在 用于检查是否存在三、RequestconstrequestnewRequest(https://api.example.com/users,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({key:value})})request.url// https://api.example.com/usersrequest.method// POSTrequest.headers// headers对象request.body// ReadableStream 可读流不能直接查看内容四、ResponseconstresponsenewResponse(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// okresponse.url// (实际响应中会有值https://api.example.com/users?id123)response.headers// headers对象response.body// ReadableStream只能读取一次。response.bodyUsed//表示响应体是否已被读取// Response 对象只能调用一次 json() 方法// 然后 response.bodyUsed就会变成true//其他消费响应体的方法response.text()response.arrayBuffer()response.blob()response.formData()五、jsonJSON.stringify()// json对象转字符串JSON.parse()// 字符串转json对象JSON.stringify()遇到循环引用会抛出错误TypeError不能处理{a:1,self:a}JSON.stringify() 的undefined 在对象中被忽略在数组中转为 null// 1. 对象属性 → 被忽略不是 nullJSON.stringify({a:undefined,b:1});// {b:1} ← a 消失了不是 a:null// 2. 数组元素 → 转为 nullJSON.stringify([undefined,1]);// [null,1] ← 变成 null 了// 3. 单独 undefinedJSON.stringify(undefined);// undefined ← 不是字符串 undefined值在对象中在数组中单独序列化undefined被忽略属性消失转为null返回undefined非有效JSONfunction被忽略转为null返回undefinedSymbol被忽略转为null返回undefinedSymbol 是 ES6 引入的原始数据类型表示唯一的标识符。// 第三方库和自己代码都用了 idconstlibIdSymbol(id);constmyIdSymbol(id);constobj{[libId]:库的ID,[myId]:我的ID};// 互不干扰console.log(libIdmyId);// false 永远唯一JSON.parse() 不会忽略任何值但会严格遵循 JSON 规范输入结果说明nullnull解析为 null 值undefined❌报错undefined不是有效的 JSONundefinedundefined字符串undefined合法{a: undefined}❌报错属性值不能是 undefined{a: null}{a: null}✅ 正常解析{a: 1, b: undefined}❌报错整个对象解析失败JSON.stringify() 的第二个参数可以是一个数组用于指定对象中哪些属性需要被序列化。constuser{name:Alice,age:30};// 只序列化 name属性constjsonStringJSON.stringify(user,[name]);console.log(jsonString);// 输出{name:Alice}JSON.parse() 的第二个参数 reviver 是一个函数它在解析过程中对每个键值对调用一次。返回值将作为该键的新值。constuser{name: Alice, age: 30};// JSON 规范要求键和字符串值必须使用 双引号constobjJSON.parse(user,(key,value)value);// reviver 函数此处原样返回console.log(obj.name);// Aliceconsole.log(obj.age);// 30