qs库的介绍

一、qs的引入

yarn add qs

import qs from 'qs'

二、使用介绍

1.Parse Object

  •   基本使用
let obj = qs.parse('a=b'); // {a:'b'}
  • 是否有原型
let nullObject = qs.parse("a[hasOwnProperty]=b", { plainObjects: true }); //无原型链
var protoObject = qs.parse("a[hasOwnProperty]=b", {allowPrototypes: true});//有原型链
  • 限制数量
    var limited = qs.parse('a=b&c=d', { parameterLimit: 1 }); //限制为1
    assert.deepEqual(limited, { a: 'b' });
  • 设置判断分隔的符号
    var delimited = qs.parse('a=b;c=d', { delimiter: ';' });// delimiter可以随意设置,比如 , { |
    assert.deepEqual(delimited, { a: 'b', c: 'd' });
  • 去除QueryFix
    var prefixed = qs.parse('?a=b&c=d', { ignoreQueryPrefix: true });
    assert.deepEqual(prefixed, { a: 'b', c: 'd' });
  • 嵌套生成
    let obj = qs.parse("foo[bar]=baz"); //{foo:{bar:baz}}
    //嵌套的深度设置
    var deep = qs.parse('a[b][c][d][e][f][g][h][i]=j', { depth: 1 });
    assert.deepEqual(deep, { a: { b: { '[c][d][e][f][g][h][i]': 'j' } } });
    //最多只能到五层
    var expected = {
        a: {
            b: {
                c: {
                    d: {
                        e: {
                            f: {
                                '[g][h][i]': 'j'
                            }
                        }
                    }
                }
            }
        }
    };
    var string = 'a[b][c][d][e][f][g][h][i]=j';
    assert.deepEqual(qs.parse(string), expected);
  • 允许 dots
    var withDots = qs.parse('a.b=c', { allowDots: true });
    assert.deepEqual(withDots, { a: { b: 'c' } });
    

    2.Parse Array

  • 使用 [] 生成
    var withArray = qs.parse('a[]=b&a[]=c');
    assert.deepEqual(withArray, { a: ['b', 'c'] });
    
  • 可以指定 index(max=20)
    var withIndexes = qs.parse('a[1]=c&a[0]=b');
    assert.deepEqual(withIndexes, { a: ['b', 'c'] });
    

    当指定的 index 很大(小于20)的时候,qs 会自动压缩

    var withIndexes = qs.parse('a[1]=c&a[15]=b');
    assert.deepEqual(withIndexes, { a: ['b', 'c'] });
    
  • 允许空值
    var withEmptyString = qs.parse('a[]=&a[]=b');
    assert.deepEqual(withEmptyString, { a: ['', 'b'] });
     
    var withIndexedEmptyString = qs.parse('a[0]=b&a[1]=&a[2]=c');
    assert.deepEqual(withIndexedEmptyString, { a: ['b', '', 'c'] });
    
  • 当 index 大于20的时候 会变成对象
    var withMaxIndex = qs.parse('a[100]=b');
    assert.deepEqual(withMaxIndex, { a: { '100': 'b' } });
    

    当然这个 max 值你可以自己设定(0~20 ,超过20设不设置都一样了)

    var withArrayLimit = qs.parse('a[1]=b', { arrayLimit: 0 });
    assert.deepEqual(withArrayLimit, { a: { '1': 'b' } });
    

    不让它生成数组

    var noParsingArrays = qs.parse('a[]=b', { parseArrays: false });
    assert.deepEqual(noParsingArrays, { a: { '0': 'b' } });
  • 混合使用,返回的是Object
    var mixedNotation = qs.parse('a[0]=b&a[b]=c');
    assert.deepEqual(mixedNotation, { a: { '0': 'b', b: 'c' } });
    
  • 生成 Object
    var arraysOfObjects = qs.parse('a[][b]=c');
    assert.deepEqual(arraysOfObjects, { a: [{ b: 'c' }] });
    

    3. Parse stringify

  • 基本使用,默认encode输出
    qs.stringify(object, [options]);
    assert.equal(qs.stringify({ a: 'b' }), 'a=b');
    assert.equal(qs.stringify({ a: { b: 'c' } }), 'a%5Bb%5D=c');
    
  • 关闭 encode
    var unencoded = qs.stringify({ a: { b: 'c' } }, { encode: false });
    assert.equal(unencoded, 'a[b]=c');
  • 只对 value encode
    var encodedValues = qs.stringify(
        { a: 'b', c: ['d', 'e=f'], f: [['g'], ['h']] },
        { encodeValuesOnly: true }
    );
    assert.equal(encodedValues,'a=b&c[0]=d&c[1]=e%3Df&f[0][0]=g&f[1][0]=h');
    
  • 自定义 encode
    var encoded = qs.stringify({ a: { b: 'c' } }, { encoder: function (str) {
        // Passed in values `a`, `b`, `c`
        return // Return encoded string
    }})
  • 自定义 decode
    var decoded = qs.parse('x=z', { decoder: function (str) {
        // Passed in values `x`, `z`
        return // Return decoded string
    }})
  • 对 Array 使用 arrayFormat
    qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
    // 'a[0]=b&a[1]=c'
    qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
    // 'a[]=b&a[]=c'
    qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
    // 'a=b&a=c'
  • 对 Object 操作默认为 bracket notation
    qs.stringify({ a: { b: { c: 'd', e: 'f' } } });
    // 'a[b][c]=d&a[b][e]=f'
    也可以设置为  dots notation
    
    qs.stringify({ a: { b: { c: 'd', e: 'f' } } }, { allowDots: true });
    // 'a.b.c=d&a.b.e=f'
  • 空的字符串或者 null 的时候会省略值,但是等号(=)会保留
    qs.stringify({ a: '' }) 'a='
    qs.stringify({ a: null }) 'a='
    
  • 当一个key对应的值为空时(空数组,空对象),没有返回值
    qs.stringify({ a: [] }) ''
    qs.stringify({ a: {} }) ''
    qs.stringify({ a: [{}] }) ''
    qs.stringify({ a: { b: []} }) ''
    qs.stringify({ a: { b: {}} }) ''
    
  • value 为 undefined 的时候也会被忽略
    qs.stringify({ a: null, b: undefined }), 'a='
  • 一个 query 字符串可以预添加 (?)
    assert.equal(qs.stringify({ a: 'b', c: 'd' }, { addQueryPrefix: true }), '?a=b&c=d');
    
  • 对 null 的处理

        在默认下,null 会被当做空字符串处理 

var withNull = qs.stringify({ a: null, b: '' });
assert.equal(withNull, 'a=&b=');

        Parse 不区分有没有 = 的参数,他们都会被解析为空字符串

var equalsInsensitive = qs.parse('a&b=');
assert.deepEqual(equalsInsensitive, { a: '', b: '' });

       为了区分 null 和空字符串,可以加上 strictNullHandling,他会区分 null 和空字符串

var strictNull = qs.stringify({ a: null, b: '' }, { strictNullHandling: true });
assert.equal(strictNull, 'a&b=');

var parsedStrictNull = qs.parse('a&b=', { strictNullHandling: true });
assert.deepEqual(parsedStrictNull, { a: null, b: '' });

       忽略 value === null的键值对,可以使用 skipNulls

var nullsSkipped = qs.stringify({ a: 'b', c: null}, { skipNulls: true });
assert.equal(nullsSkipped, 'a=b');

上面就是qs相关的使用啦,希望可以有所帮助

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值