封装QueryString构造函数,实现stringify、parse方法

实现QueryString

题目要求:

  1. 给定一个对象{a:1,b:2,c:[1,2] }
  2. 输出一个查询字符串 ?a=1&b=2&c=1,2

要求给出 实现QueryString 构造函数身上的 stringify 和 parse 方法

stringify

我们先来实现一下stringify 方法

首先呢 我们先定义构造函数

  • 接收两个参数 pre : 前缀 和seq : 分隔符
js 复制代码
 function QueryString(pre,seq){
     
 }

在这个构造函数身上添加一个stringify 方法

  • 这个函数接收一个对象
  • 遍历这个对象
  • 拿到key 和 value 值 以及 seq 分隔符 进行拼接
  • 然后追加在str 身上
  • 最后针对str 身上的最后的分割符 进行 去除 (slice|| substring)
js 复制代码
 QueryString.prototype.stringify = function(obj){
     //1. 定义字符串
     let str = this.pre // 定义一个字符串 然后值为传过来的前缀
     //2. 遍历obj 对象
     for(let key in obj){
         // key : 为obj 对象的key值 即 键名 
         // obj[key] : 通过这种方式取到对应键值的value值
         //   模板字符串 进行拼接即可
         //   最后追加在str 变量身上
         str += `${key}=${obj[key]}${this.seq}`
     }
     return str.slice(0,-1) // 去除字符串最后的分隔符 然后进行返回
 }

好, 第一种原始的方法 我们 已经介绍完毕了剩下我们介绍一种使用es6 新api 解决的方案 只需要一行代码 即可完成功能呢

  • Object.keys() 静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
  • map() 方法创建一个新数组 ,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成
  • join() 方法将数组中所有元素连接为一个字符串。
js 复制代码
 QueryString.prototype.stringify = function (obj) {
     return this.pre + Object.keys(obj).map(k => k + '=' + obj[k]).join(this.seq)
 }

我们来进行拆解一下:

  1. this.pre = ?

  2. Object.keys(obj) = [a,b,c]

  3. a,b,c\].map(k = \> console.log(k,obj\[k\])) **a 1** **b 2** **c \[1,2\]**

a=1

b=2

c=1,2

因为map 之后 会返回一个新的数组 经过上面的处理之后 我们目前的数组变成了

'a=1', 'b=2', 'c=1,2'

再之后 进行 join 拼接 得到一个含有指定符号(取决于传给join 的 符号)的字符串

'a=1&b=2&c=1,2'

再之后 加上前缀 this.pre? 即可完成了

?a=1&b=2&c=1,2

parse

题目要求:

输入

'?a=1&b=2&c=1,2'

输出

{a: '1', b: '2', c: ['1','2']}

好嘞,我们开始吧

还是和上面一样在构造函数的原型上添加方法 该方法接收一个字符串为参数

js 复制代码
 QueryString.prototype.parse = function (str) {}

首先我们需要生成一个对象, 因为题目最后要求输出一个对象,也表示我们需要在该方法return一个对象

js 复制代码
 QueryString.prototype.parse = function (str) {
     // 生成一个对象 最后需要返回u
     let result ={}
     return result
 }

其次我们先打印一个str (这里已经调用该方法 并传入'?a=1&b=2&c=1,2') 了

?a=1&b=2&c=1,2

这里我们先观察一下这个字符串, 可以划分一下

? || a=1 || & || b=2 || & || c=1,2

我们先把? 作为标识符号即 this.pre 即我们之前在构造函数身上添加的属性 进行分割

下面的代码将会返回

js 复制代码
 str.split(this.pre)  // [' ', 'a=1&b=2&c=1,2']

接下来我们可以直接使用索引取出这个数组第二个值a=1&b=2&c=1,2

a=1 || & || b=2 || & || c=1,2

此时我们继续重复上面的步骤来, 继续进行分割,按照```分隔符`` `

js 复制代码
 str.split(this.pre)[1].split(this.seq) //  ['a=1', 'b=2', 'c=1,2']

好,现在我们已经拿到我们想要的内容了,接下来呢 我们想的是取

a ---> key

1 ---> value

然后进行obj对象的赋值

我们现在是个数组, 然后针对这样的数组 我们需要取出里面的每一项用

forEach是一个用于数组的方法,用于遍历数组的每个元素并执行指定的操作。它接受一个回调函数作为参数,并将数组的每个元素依次传递给回调函数进行处理。

js 复制代码
 const s1 = str.split(this.pre)[1].split(this.seq)
 s1.forEach((item)=>{
     console.log(item) // 
 })

item:

a=1

b=2

c=1,2

看到=号,我们还需要进行分割,因为这样不仅可以去除 = , 还有就是 把 a1 放入一个数组里面,并且独立的项

即 item.split('=') --> ['a','1']

然后分别抽离key 和 value

即 const k = item.split('=')[0] const v = item.split('=')[1]

再给对象赋值之前还有一步 原本c 是一个数组,所以我们需要进行if判断

js 复制代码
       if (v.includes(',')) {
             // 继续分割 因为'1,2' 字符 按照,号分割 -->> ['1','2']
             result[k] = v.split(',')
         } else {
             result[k] = v
         }

好了, 至此代码结束

下面是完整的代码, 其实没有多少, 主要考察 字符串切割split()

js 复制代码
 QueryString.prototype.parse = function (str) {
     // 生成一个对象 最后需要返回u
     let result = {}
     // 首先我们先进行字符的分割 --> 拿到我们主要内容
     const s = str.split(this.pre)s[1].split(this.seq)
     // 好,这个时候我们已经拿到我们想要的内容, 然后进行
     // 循环遍历
     s.forEach((item) => {
         // 解构赋值 -- 一一对应
         const [k,v] = item.split('=')
         if (v.includes(',')) {
             result[k] = v.split(',')
         } else {
             result[k] = v
         }
     })
     return result
 }
相关推荐
狗头大军之江苏分军7 分钟前
iPhone 17 vs iPhone 17 Pro:到底差在哪?买前别被忽悠了
前端
小林coding7 分钟前
再也不怕面试了!程序员 AI 面试练习神器终于上线了
前端·后端·面试
文心快码BaiduComate20 分钟前
WAVE SUMMIT深度学习开发者大会2025举行 文心大模型X1.1发布
前端·后端·程序员
babytiger20 分钟前
python 通过selenium调用chrome浏览器
前端·chrome
passer98126 分钟前
基于webpack的场景解决
前端·webpack
华科云商xiao徐33 分钟前
Java并发编程常见“坑”与填坑指南
javascript·数据库·爬虫
奶昔不会射手40 分钟前
css3之grid布局
前端·css·css3
举个栗子dhy44 分钟前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js