来讲讲怎样获取到url上所有参数并以对象形式保存，再讲讲JSON解析与序列化

Posted 2023-02-23

---

theme: juejin highlight: gi

前言

​​大家好，我是梁木由，一个有想头的前端，最近呢也在为明年跳槽做复习准备。但我有个朋友呢，打算在年前跳槽，这不这几天正在疯狂面试中，前两天问了我两个问题，说是面试中遇到的。我看了下问题，思考的久久不能自拔，有个大概的模糊的想法，但是呢具体的写法还真没思考出来，于是呢便去查了查,给大家整理了出来​​

截取字符串参数

如何将url上所有的参数都给获取到，并以对象形式展示

实现步骤

• 首先需要取得url参数部分
• 声明一个保存参数的对象
• 将每对参数进行分割成数组保存
• 遍历每对参数，再获取键值对，存储到保存参数的对象中
• 注意需要对中文解码decodeURIComponent

function getQueryStringArgs()
  // 取得参数字符串并去掉问号
  let params = location.search.length > 0 ? location.search.substring(1) : ,
        // 声明保存参数的对象
        args = ,
        // 保存每对参数
        items = params.length ? params.split(&) : [],
        // 存储键值对
        item = null,
        // 键
        name = null,
        // 值
        value = null,
        len = items.length;
  
  // 遍历每对参数
  for(let i = 0; i < len; i++)
    // 获取键值对
    item = items[i].split(=);
    name = decodeURIComponent(item[0]);
    value = decodeURIComponent(item[1]);
    
    // 将每一对参数都添加到args中
    if(name.length)
      args[name] = value
    
  
  return args

JSON解析与序列化

相信大家都经常用到JSON对象的两个方法stringify() 与 parse() 那知道他们的完整用法吗

parse

将JSON字符串解析为原生的javascript对象

​​JSON.parse(text[, reviver])​​

• text 必需传一个有效的 JSON 字符串，要被解析成 javascript 值
• reviver 可选，一个转换结果的函数， 将为对象的每个成员调用此函数，用于在返回结果之前，修改解析生成的原始值

const str  = "date":"2023-01-11T03:24:36.398Z","time":"111","aa":null

const jsonStr = JSON.parse(str)
console.log(jsonStr) //  date: 2023-01-11T03:24:36.398Z, time: 111, aa: null 

const jsonStr1 = JSON.parse(str,(key, value) => 
  if(key === date)
      return new Date(value)
  else 
      return value
  
)
console.log(jsonStr1.date.getFullYear()) //2023

stringify

将JavaScript对象序列化为JSON字符串

​​JSON.stringify(value[, replacer[, space]])​​

• value 第一个参数，将要序列后成 JSON 字符串的值
• replacer 可选。用于转换结果的函数或数组
  如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
  如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组
• space 可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\\t。

value参数

那咱门看第一个demo，JSON.stringify()的基础用法

var obj = 
    date: new Date(),
    time:111,
    aa:null,
    vv:undefined


console.log(JSON.stringify(obj)) // "date":"2023-01-11T03:24:36.398Z","time":"111","aa":null

大家发现没，​​obj.vv​​通过stringfiy后丢失了，为什么呢，是因为​​JSON.stringify​​ 在转换过程中会忽略其值未定义的字段。

replacer参数

接下来看第二个demo，replacer参数的用法

参数为函数时，可以对原始值进行修改，在哪可以用到呢，就比如项目当中需要使用JSON.stringify()，但是想保留为定义的字段时，可以先对其进行转化

var obj = 
  date: new Date(),
  time:111,
  aa:null,
  vv:undefined


console.log(
  JSON.stringify(obj, (key,value) => 
    if(typeof value == undefined)
      return true
    
    return value
  )
)
// "date":"2023-01-11T06:30:26.702Z","time":"111","aa":null,"vv":true

参数为数组时只保留 date 属性的值

var obj = 
  date: new Date(),
  time:111,
  aa:null,
  vv:undefined


console.log(
  JSON.stringify(obj,[date])
)
//"date":"2023-01-11T06:33:20.772Z"

space参数

用来控制缩进用的空白字符串，好像实在也没什么鸟用

var obj = 
  date: new Date(),
  time:111,
  aa:null,
  vv:undefined


console.log(
  JSON.stringify(obj,,2)
)
/*
  "date": "2023-01-11T06:37:39.995Z",
  "time": "111",
  "aa": null
*/

console.log(
  JSON.stringify(obj,,10)
)
/*
          "date": "2023-01-11T06:38:53.998Z",
          "time": "111",
          "aa": null
*/