只是簡(jiǎn)要的并且用自己的話翻譯了一下，方便本人查閱。

引入 QS 庫(kù)

yarn add qs

import qs from 'qs'
import assert from 'assert' //用來測(cè)試

使用

1.Parse Object

• 基本使用

let obj = qs.parse('a=c'); // {a:'c'}

• 是否有原型

 let nullObject = qs.parse("a[hasOwnProperty]=b", { plainObjects: true }); //無原型鏈
 var protoObject = qs.parse("a[hasOwnProperty]=b", {allowPrototypes: true});//有原型鏈

• 嵌套生成

let obj = qs.parse("foo[bar]=baz"); //{foo:{bar:baz}} 

//嵌套的深度設(shè)置
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);

• 限制數(shù)量

var limited = qs.parse('a=b&c=d', { parameterLimit: 1 }); //限制為1
assert.deepEqual(limited, { a: 'b' });

• 去除QueryFix

var prefixed = qs.parse('?a=b&c=d', { ignoreQueryPrefix: true });
assert.deepEqual(prefixed, { a: 'b', c: 'd' });

• 設(shè)置判斷分隔的符號(hào)

var delimited = qs.parse('a=b;c=d', { delimiter: ';' });// delimiter可以隨意設(shè)置嗜历，比如 , { |
assert.deepEqual(delimited, { a: 'b', c: 'd' });

• 使用正則判斷分隔

var regexed = qs.parse('a=b;c=d,e=f', { delimiter: /[;,]/ });
assert.deepEqual(regexed, { a: 'b', c: 'd', e: 'f' });

• 允許 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'] });

? 當(dāng)指定的 index 很大(小于20)的時(shí)候，qs 會(huì)自動(dòng)壓縮

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'] });

• 當(dāng) index 大于20的時(shí)候 會(huì)變成對(duì)象

var withMaxIndex = qs.parse('a[100]=b');
assert.deepEqual(withMaxIndex, { a: { '100': 'b' } });

? 當(dāng)然這個(gè) max 值你可以自己設(shè)定(0~20 奥邮，超過20設(shè)不設(shè)置都一樣了)

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

? 你甚至可以直接不讓它生成數(shù)組

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

• 基本使用,默認(rèn)encode輸出

qs.stringify(object, [options]);
assert.equal(qs.stringify({ a: 'b' }), 'a=b');
assert.equal(qs.stringify({ a: { b: 'c' } }), 'a%5Bb%5D=c');

• 關(guān)閉 encode

var unencoded = qs.stringify({ a: { b: 'c' } }, { encode: false });
assert.equal(unencoded, 'a[b]=c');

• 只對(duì) 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
}})

• 對(duì) 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'

• 對(duì) Object 操作默認(rèn)為 bracket notation

qs.stringify({ a: { b: { c: 'd', e: 'f' } } });
// 'a[b][c]=d&a[b][e]=f'

也可以設(shè)置為  dots notation

qs.stringify({ a: { b: { c: 'd', e: 'f' } } }, { allowDots: true });
// 'a.b.c=d&a.b.e=f'

• 空的字符串或者 null 的時(shí)候會(huì)省略值，但是等號(hào)（=）會(huì)保留

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

• 當(dāng)一個(gè)key對(duì)應(yīng)的值為空時(shí)（空數(shù)組阳掐，空對(duì)象）,沒有返回值

assert.equal(qs.stringify({ a: [] }), '');
assert.equal(qs.stringify({ a: {} }), '');
assert.equal(qs.stringify({ a: [{}] }), '');
assert.equal(qs.stringify({ a: { b: []} }), '');
assert.equal(qs.stringify({ a: { b: {}} }), '');

• value 為 undefined 的時(shí)候也會(huì)被忽略

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

• 一個(gè) query 字符串可以預(yù)添加 (?)

assert.equal(qs.stringify({ a: 'b', c: 'd' }, { addQueryPrefix: true }), '?a=b&c=d');

• 設(shè)置分隔字符串

assert.equal(qs.stringify({ a: 'b', c: 'd' }, { delimiter: ';' }), 'a=b;c=d');

• 如果只想重寫日期對(duì)象的序列化始衅，則可以提供序列化選項(xiàng)

var date = new Date(7);
assert.equal(
    qs.stringify({ a: date }, { serializeDate: function (d) { return d.getTime(); } }),
    'a=7'
);

• 可以使用 sort 選項(xiàng)，對(duì) key 進(jìn)行排序

function alphabeticalSort(a, b) {
    return a.localeCompare(b);
}
assert.equal(qs.stringify({ a: 'c', z: 'y', b : 'f' }, { sort: alphabeticalSort }), 'a=c&b=f&z=y');

• 通過對(duì) key 進(jìn)行 filter 缭保，并對(duì) value 操作

function filterFunc(prefix, value) {
    if (prefix == 'b') {
        // Return an `undefined` value to omit a property.
        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'

• 對(duì) null 的處理

在默認(rèn)下汛闸，null 會(huì)被當(dāng)做空字符串處理

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

Parse 不區(qū)分有沒有 = 的參數(shù)，他們都會(huì)被解析為空字符串

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

現(xiàn)在艺骂，為了區(qū)分 null 和 空字符串的區(qū)別诸老，你可以加上 strictNullHandling，他會(huì)區(qū)分 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的鍵值對(duì)钳恕，可以使用 skipNulls

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