vue项目中qs详解

简述：qs是一个增加了一些安全性的查询字符串解析和序列化字符串的库，通常有两种使用方式：

1、将URL解析成对象的形式：qs.parse(str)

例1：

let data  = 'a=1&b=2&c=3';
qs.parse(data);//结果为：{a:'1',b:'2',c:'3'}

例2：

let data = 'a=c';
qs.parse(data);//结果为：{a:'c'}

例3：

let data = 'foo[bar]=baz';
qs.parse(data);//结果为: foo:{bar : 'baz'}

例4:嵌套对象qs最多只能解析5个子级

let data = ' a[b][c][d][e][f][g][h][i]=j ' ; 
qs.parse(data);//结果为：{a ：{ b ：{c ：{d {e ：{f ：{ ' [g] [h] [i] '：'j'}}}}}}}

例5:嵌套对象qs解析是，可以限制解析的层级 {depth:层级}

let data = ' a[b][c][d][e][f][g][h][i]=j ' ; 
qs.parse(data，{depth:1});//结果为：{a ：{ b ：[c][d][e][f][g] [h] [i] '：'j'}}

例6：

let data = 'a[]=b&a[]=c';
qs.parse(data);//{a:['b','c']}

例7：

let data = 'a[0]=b&a[1]=c';
qs.parse(data);//{a:['b','c']}

例8：

let data = 'a[0]=&a[1]=c';
qs.parse(data);//{a:['','c']}

例9：

let data = 'a[100]=c';
qs.parse(data);//{a:{'100':'c'}}         

例10：

let data = 'a[]=c';
qs.parse(data);//{a:{'0':'c'}} 

例11：

let data = 'a=b,c';
qs.parse(data);//{a:['b','c']} 

例12：可以传入界定符

let data = 'a=b;c=d';
qs.parse(data,{delimiter:';'});//{a:'b',c:'d'} 

例13：可以传入界定符,界定符可以是正则

let data = 'a=b;c=d,e=f';
qs.parse(data,{delimiter:'/[,;]/'});//{a:'b',c:'d',e:'f'}

例14：可以绕过开头的？

let data = '?a=b&c=d';
qs.parse(data,{ignoreQueryPrefix:true});//{a:'b',c:'d'}

例15：qs最多只能解析1000参数，可以通过设置parameterLimit进行设置参数的个数,如，设置只能解析2个

let data = 'a=b&c=d';
qs.parse(data,{parameterLimit:2});//{a:'b',c:'d'}

例16：可以启用点表示法，allowDots

let data = 'a.b=c';
qs.parse(data,{allowDots:true});//{a:{b:'c'}}

例17：URI编码的字符串也可以被解析

let data = 'a%5Bb%5D=c';
qs.parse(data);//a: { b: 'c' }

例18：当需要支持旧浏览器或服务，则可以通过设置charset来支持将百分比编码的八位字节解码为iso-8859-1

let data = 'a =％A7';
qs.parse(data,{charset:''iso-8859-1'});//{  a ：' § ' } 

例19：完全禁用数组解析，需要设置parseArray:false

let data = 'a[]=b';
qs.parse(data,{parseArray:false});//{  a ：{'0':'b'} } 

例20：如果混合使用符号，将会两项合并为对象

let data = 'a[0]=b&'a[b]=c;
qs.parse(data);//{  a ：{'0':'b','b':'c'} } 

例21：

let data = 'a[][b]=c;
qs.parse(data);//{  a ：[{b:'c'}] } 

例22：使用逗号加入数组

let data = 'a=b,c;
qs.parse(data);//{  a ：['b','c'] } 

2、串化：qs.stringify(dataObj)

例1：

let obj = {a:'b'};
qs.stringify(obj);//结果为：'a=b'

例2：解析嵌套的对象，默认会进行编码

let obj = {a:{b:'c'}};
qs.stringify(obj);//结果为：'a%5Bb%5D=c'

例3：解析嵌套的对象，默认会进行编码，可以设置不编码encode:false

let obj = {a:{b:'c'}};
qs.stringify(obj,{encode:false});//结果为：'a[b]=c'

例4：对数组进行串化的时候，默认会提供显示索引

let obj = { a: ['b', 'c', 'd'] };
qs.stringify(obj);//结果为：'a[0]=b&a[1]=c&a[2]=d'

例5：对数组进行串化的时候，默认会提供显示索引，可以通过设置indices:false

let obj = { a: ['b', 'c', 'd'] };
qs.stringify(obj,{indices:false});//结果为：'a=b&a=c&a=d' 

例6：可以通过设置arrayFormat指定数组的输出格式

let obj = { {  a ：[ ' b '，' c ' ]  };
qs.stringify(obj,{arrayFormat:'indices'});//结果为：'a[0]=b&a[1]=c'   
qs.stringify(obj,{arrayFormat:'brackets'});//结果为：'a[]=b&a[]=c'   
qs.stringify(obj,{arrayFormat:'comma'});//结果为：'a=b,c'  

例7：字符串化后的对象，默认使用括号表示法

let obj = {  a ：{  b ：{  c ：' d '，  e ：' f ' } } } ;
qs.stringify(obj);//结果为：'a [b] [c] = d＆a [b] [e] = f' 

例8：可以设置allowDots来使用点符号串化

let obj = {  a ：{  b ：{  c ：' d '，  e ：' f ' } } } ;
qs.stringify(obj);//结果为：'a.b.c = d＆a.b.e = f' 

例9：空字符串或者控制可以忽略，但仍然保留=

let obj = {  a :'' } ;
qs.stringify(obj);//结果为：'a=' 

例10：没有值的空对象或空数组将不返回任何内容

let obj1 = { a: [] } ;
let obj2 = { a: {} } ;
let obj3= { a: [{}] } ;
let obj4 = { a: { b: []} } ;
let obj5 = { a: { b: {}} } ;
qs.stringify(obj1);//结果为：'' 
qs.stringify(obj2);//结果为：'' 
qs.stringify(obj3);//结果为：'' 
qs.stringify(obj4);//结果为：'' 
qs.stringify(obj5);//结果为：'' 

例11：属性为undefined的将直接被忽略

let obj = {  a :null ,b:undefined};
qs.stringify(obj);//结果为：'a='

例12：分隔符也可以自定义，设置delimiter:‘你自定义的符号’

let obj = {  a :'b',c:'d' } ;
qs.stringify(obj,{delimiter:'!'});//结果为：'a=b!c=d'

例13：分隔符也可以自定义，设置delimiter:‘你自定义的符号’

let obj = {  a :'b',c:'d' } ;
qs.stringify(obj,{delimiter:';'});//结果为：'a=b;c=d'

例14：查询字符串前面可以带有？

let obj = {  a :'b',c:'d' } ;
qs.stringify(obj,{addQueryPrefix:true});//结果为：'?a=b&c=d'

例15：将查询字符串排序后输出

```bash
function sort(a,b){
  return a.localeCompare(b);
}
let obj = { a: 'c', z: 'y', b : 'f' } ;
qs.stringify(obj,{sort:sort});//结果为：'a=c&b=f&z=y'

例16：将查询字符串排序后输出

function sort(a,b){
  return a.localeCompare(b);
}
let obj = { a: 'c', z: 'y', b : 'f' } ;
qs.stringify(obj,{sort:sort});//结果为：'a=c&b=f&z=y'

例17：将查询字符串进行过滤后输出

function filterFunc(prefix, value) {
    if (prefix === 'b') {
        return;
    }
    if (prefix === 'e[f]') {
        return value.getTime();
    }
    if (prefix === 'e[g][0]') {
        return value * 2;
    }
    return value;
}
qs.stringify({ a: 'b', c: 'd', e: { f: new Date(123), g: [2] } }, { filter: filterFunc });// 'a=b&c=d&e[f]=123&e[g][0]=4'
qs.stringify({ a: 'b', c: 'd', e: 'f' }, { filter: ['a', 'e'] });// 'a=b&e=f'
qs.stringify({ a: ['b', 'c', 'd'], e: 'f' }, { filter: ['a', 0, 2] });// 'a[0]=b&a[2]=d'

例18：默认情况下，null值被视为空值

let obj = { a: '', b: null } ;
qs.stringify(obj);//结果为：'a=&b='

例20：如果需要与旧系统进行通信，可以设置charset

let obj = { æ: 'æ' };
qs.stringify(obj,{charset:''iso-8859-1'});//结果为：'%E6=%E6'

例19：解析带等号和不带等号的,区分null和空字符串需要使用strictNullHandling,null值不带等号,如果需要完全跳过null值的键值对需要使用skipNulls

let data = 'a&b=';
qs.parse(data);//{a:'',b:''}
let obj = { a: '', b: null } ;
qs.stringify(obj,{strictNullHandling:true});//结果为：'a=&b'
let obj = { a: '1', b: null ,c:2} ;
qs.stringify(obj,{skipNull:true});//结果为：'a=1&c=2'