深入理解qs库：简化你的工作流程

2024-04-28 10:59
文章标签 流程 工作 深入 理解 简化 qs

本文主要是介绍深入理解qs库：简化你的工作流程，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

在 vue 开发中，处理 url 查询字符串是一个常见的任务。qs 库是一个流行的工具，可以帮助我们轻松地处理 url 查询字符串的编码和解码。本文将介绍 qs 库的基本用法，并结合实例演示帮助你更好地理解和应用这个实用的工具。

一、qs 是什么？

qs 是一个 node.js 和浏览器中的 url 查询字符串解析和序列化库。它可以将 JavaScript 对象转换为 url 查询字符串，也可以将 url 查询字符串解析为 JavaScript 对象。qs 库支持多种编码格式，包括 application/x-www-form-urlencoded 和 multipart/form-data 等。它还提供了一些高级功能，例如解析嵌套对象和数组、自定义编码和解码函数等。qs 库易于使用，广泛应用于 web 开发中的 url 查询字符串处理。

二、安装

  • 安装

    npm i qs

  • 局部引入

    import qs from 'qs'

  • 全局引入

    import qs from 'qs'
Vue.prototype.$qs = qs //使用时直接 this.$qs

三、使用

我们在使用 qs 库时，两个最常用的方法是 stringify 和 parse。下面我将详细介绍这两个方法的作用和用法：

3.1 stringify 方法

  • 作用：将 JavaScript 对象序列化为 url 查询字符串

  • 用法：qs.stringify(object, [options])

  • 参数：

    • object：要序列化的 JavaScript 对象
    • options（可选）：一个包含序列化选项的对象

  • 返回值：序列化后的 url 查询字符串

实例

在下面的实例中，stringify 方法将 obj 对象序列化为 url 查询字符串。

mounted() {const obj = { foo: "bar", baz: ["qux", "quux"], corge: "" };const queryString = qs.stringify(obj);console.log(queryString);
},

控制台打印

在这里插入图片描述

3.2 parse 方法

  • 作用：将 url 查询字符串解析为 JavaScript 对象
  • 用法：qs.parse(str, [options])
  • 参数：
    • str：要解析的URL查询字符串
    • options（可选）：一个包含解析选项的对象
  • 返回值：解析后的 JavaScript 对象

实例

在下面的实例中，parse 方法将 queryString 解析为 JavaScript 对象。

mounted() {const queryString = "foo=bar&baz%5B0%5D=qux&baz%5B1%5D=quux&corge=";const obj = qs.parse(queryString);console.log(obj);
},

控制台打印
在这里插入图片描述

四、qs 的高级用法

4.1 解析嵌套对象（深度序列化）

qs 库可以解析嵌套对象，将查询字符串转换为嵌套的 JavaScript 对象。

mounted() {const queryString = "user[name]=John&user[age]=25";const parsed = qs.parse(queryString, { depth: 1 });console.log(parsed); // 输出：{ user: { name: 'John', age: '25' } }
},

其中，depth 选项用于指定解析嵌套对象时的最大深度。它控制了解析过程中嵌套对象的层级数。默认情况下，depth 选项的值为 5，表示 qs 库将解析最多 5 层的嵌套对象。如果查询字符串中的嵌套对象超过了指定的深度，qs 库将停止解析并将其视为字符串。通过调整 depth 选项的值，可以控制 qs 库解析嵌套对象的深度。例如，将 depth 设置为 1，则只解析一层嵌套对象，超过一层的嵌套对象将被视为字符串。

4.2 序列化数组

mounted() {const arr = ["apple", "banana", "cherry"];const serialized = qs.stringify({ fruits: arr }, { arrayFormat: "indices" });console.log(serialized); // 输出：fruits=apple&fruits=banana&fruits=cherry
},

在这个例子中，fruits 是一个对象的属性名，它表示一个包含水果名称的数组。arrayFormat 是 qs.stringify 方法的选项之一，用于控制数组的序列化方式。

  • arrayFormat 选项有以下几种取值：

    indices：默认值。数组的值将使用索引作为后缀进行命名，例如 fruits[0]=apple&fruits[1]=banana&fruits[2]=cherry
    brackets：数组的值将使用方括号进行命名，例如 fruits[]=apple&fruits[]=banana&fruits[]=cherry
    repeat：数组的值将重复出现在查询字符串中，例如 fruits=apple&fruits=banana&fruits=cherry

4.3 自定义序列化函数

mounted() {const obj = {a: "value1",b: "value2",date: new Date(),};const serialized = qs.stringify(obj, {serializeDate: (i) => {const year = i.getFullYear();const month = String(i.getMonth() + 1).padStart(2, "0");const day = String(i.getDate()).padStart(2, "0");return `${year}-${month}-${day}`;},});console.log(serialized); // 输出：a=value1&b=value2&date=2023-12-21
},

在这个示例中，我们使用 qs.stringify 方法将 obj 对象序列化为 url 查询字符串的形式。在这个过程中，我们传递了一个选项对象作为第二个参数，并定义了一个名为 serializeDate 的自定义序列化函数。在 serializeDate 函数中，我们使用方法将日期对象转换为 YYYY-MM-DD 格式的字符串。

4.4 自定义解析函数

mounted() {const str = "a=value1&b=value2&date=2022-12-12";const parsed = qs.parse(str, {parseDate: (value) => {const parts = value.split("-");const year = Number(parts[0]);const month = Number(parts[1]) - 1;const day = Number(parts[2]);return new Date(year, month, day);},});console.log(parsed); // 输出：{a: 'value1', b: 'value2', date: '2022-12-12'}
},

在这个示例中，我们使用 qs.parse 方法将 str 字符串解析为一个对象。在这个过程中，我们传递了一个选项对象作为第二个参数，并定义了一个名为 parseDate 的自定义解析函数。在 parseDate 函数中，我们首先使用 split 方法将日期字符串按照 - 分割成三个部分，分别表示年份、月份和日期。然后，我们将这三个部分转换为数字，并使用 new Date 构造函数创建一个新的日期对象。

4.5 忽略特定属性

mounted() {const str = "foo_a=value1&foo_b=value2&c=value3";const parsed = qs.parse(str);// 忽略以 'foo_' 前缀开头的属性const filtered = Object.keys(parsed).reduce((acc, key) => {if (!key.startsWith("foo_")) {acc[key] = parsed[key];}return acc;}, {});console.log(filtered); // 输出：{c: 'value3'}
},

在这个示例中，我们首先使用 qs.parse 方法解析查询字符串 str，得到一个解析后的结果对象 parsed。然后，我们使用 Object.keys 方法遍历 parsed 对象的属性，并通过 reduce 方法进行过滤。对于不以 foo_ 前缀开头的属性，我们将其添加到一个新的对象 filtered 中。

五、qs.stringify 和 JSON.stringify 的区别

相同点

qs 和 JSON 都可以进行序列化。

不同点

  • 数据格式：

    qs.stringify 是 qs 库提供的方法，用于将 JavaScript 对象序列化为 url 查询字符串的格式；
    JSON.stringify 是 JavaScript 内置的方法，用于将 JavaScript 对象序列化为 JSON 字符串的格式。

  • 序列化规则：

    qs.stringify 会对对象的属性进行 url 编码，并使用等号（=）连接属性名和属性值，使用与号（&）连接不同的属性；
    JSON.stringify 会将对象的属性和值转换为字符串，并按照 JSON 格式进行序列化，属性名会被包裹在双引号中。

使用 qs.stringify 的示例代码：

mounted() {const data = {name: "John Doe",age: 25,city: "New York",};const queryString = qs.stringify(data);console.log(queryString);// 输出：name=John%20Doe&age=25&city=New%20York
},

使用 JSON.stringify 的示例代码：

mounted() {const data = {name: "John Doe",age: 25,city: "New York",};const jsonString = JSON.stringify(data);console.log(jsonString);// 输出：{"name":"John Doe","age":25,"city":"New York"}
},

六、JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于数据的序列化、存储和传输。它以简洁、易读的文本格式表示结构化的数据，通常由键值对组成。通过 JSON.parse() 和 JSON.stringify() 方法可以实现 JSON 字符串和 JavaScript 对象之间的转换。

6.1 JSON.parse() 方法

将 JSON 字符串解析为 JavaScript 对象。

示例代码：

mounted() {const jsonString = '{"name":"John Doe","age":25}';const obj = JSON.parse(jsonString);console.log(obj.name); // 输出：John Doe
},

6.2 JSON.stringify() 方法

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

示例代码：

mounted() {const obj = { name: "John Doe", age: 25 };const jsonString = JSON.stringify(obj);console.log(jsonString); // 输出：{"name":"John Doe","age":25}
},

replacer 参数

replacer 是JSON.stringify() 的第二个参数。用于控制序列化过程的选项。可以是一个函数或数组，用于过滤和转换要序列化的对象的属性。

示例代码：

mounted() {const obj = { name: "John Doe", age: 25, city: "New York" };const jsonString = JSON.stringify(obj, ["name", "age"]);console.log(jsonString); // 输出：{"name":"John Doe","age":25}
},

space 参数

space 是JSON.stringify() 的第三个参数。用于控制输出的缩进和格式化，它可以是一个数字或字符串。

当 space 参数是一个数字时，表示缩进的空格数。例如，space 为 2 时，输出的 JSON 字符串会进行缩进，每个层级缩进 2 个空格。

mounted() {const obj = { name: "John Doe", age: 25 };const jsonString = JSON.stringify(obj, null, 2);console.log(jsonString);// 输出：// {//   "name": "John Doe",//   "age": 25// }
},

当 space 参数是一个字符串时，表示用于缩进的字符串。例如，space 为 "\t" 时，输出的 JSON 字符串会使用制表符进行缩进。

const obj = { name: 'John Doe', age: 25 };
const jsonString = JSON.stringify(obj, null, "\t");
console.log(jsonString);
// 输出：
// {
//     "name": "John Doe",
//     "age": 25
// }

如果 space 参数是一个非数字且非字符串的值，例如 null，则表示不进行缩进，输出的 JSON 字符串将没有额外的空格。

const obj = { name: 'John Doe', age: 25 };
const jsonString = JSON.stringify(obj, null, null);
console.log(jsonString);
// 输出：{"name":"John Doe","age":25}

异常处理

JSON.parse() 和 JSON.stringify() 的异常处理。在解析或序列化过程中，如果遇到无效的 JSON 字符串，会抛出 SyntaxError 异常。

mounted() {try {const jsonString = '{"name":"John Doe","age":}';const obj = JSON.parse(jsonString);console.log(obj);} catch (error) {console.error(error);}
},

控制台打印

在这里插入图片描述

相关推荐

⭐ 浅谈 JSON 对象和 FormData 相互转换，打通前端与后端的通信血脉

这篇关于深入理解qs库：简化你的工作流程的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/943061。

相关文章

Security OAuth2 单点登录流程

Security OAuth2 单点登录流程

单点登录（英语：Single sign-on，缩写为 SSO），又译为单一签入，一种对于许多相互关连，但是又是各自独立的软件系统，提供访问控制的属性。当拥有这项属性时，当用户登录时，就可以获取所有系统的访问权限，不用对每个单一系统都逐一登录。这项功能通常是以轻型目录访问协议（LDAP）来实现，在服务器上会将用户信息存储到LDAP数据库中。相同的，单一注销（single sign-off）就是指
阅读更多...
Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
认识、理解、分类——acm之搜索

认识、理解、分类——acm之搜索

普通搜索方法有两种：1、广度优先搜索；2、深度优先搜索； 更多搜索方法： 3、双向广度优先搜索； 4、启发式搜索（包括A*算法等）； 搜索通常会用到的知识点：状态压缩（位压缩，利用hash思想压缩）。
阅读更多...
深入探索协同过滤：从原理到推荐模块案例

深入探索协同过滤：从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤（UserCF）2. 基于物品的协同过滤（ItemCF）3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代，推荐系统成为连接用户与内容的桥梁。本文聚焦于
阅读更多...
【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入（Embedding）方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节：嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”，它将文本中的单词或短语转换成计算机能够理解的数学形式，即向量。 正如翻译机将一种语言
阅读更多...
【C++高阶】C++类型转换全攻略：深入理解并高效应用

【C++高阶】C++类型转换全攻略：深入理解并高效应用

📝个人主页🌹：Eternity._ ⏩收录专栏⏪：C++ “ 登神长阶 ” 🤡往期回顾🤡：C++ 智能指针 🌹🌹期待您的关注 🌹🌹 ❀C++的类型转换 📒1. C语言中的类型转换📚2. C++强制类型转换⛰️static_cast🌞reinterpret_cast⭐const_cast🍁dynamic_cast 📜3. C++强制类型转换的原因📝
阅读更多...
深入手撕链表

深入手撕链表

链表 分类概念单链表增尾插头插插入 删尾删头删删除 查完整实现带头不带头 双向链表初始化增尾插头插插入 删查完整代码 数组 分类 #mermaid-svg-qKD178fTiiaYeKjl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-
阅读更多...
深入理解RxJava：响应式编程的现代方式

深入理解RxJava：响应式编程的现代方式

在当今的软件开发世界中，异步编程和事件驱动的架构变得越来越重要。RxJava，作为响应式编程（Reactive Programming）的一个流行库，为Java和Android开发者提供了一种强大的方式来处理异步任务和事件流。本文将深入探讨RxJava的核心概念、优势以及如何在实际项目中应用它。 文章目录 💯 什么是RxJava？💯 响应式编程的优势💯 RxJava的核心概念
阅读更多...
如何通俗理解注意力机制？

如何通俗理解注意力机制？

1、注意力机制（Attention Mechanism）是机器学习和深度学习中一种模拟人类注意力的方法，用于提高模型在处理大量信息时的效率和效果。通俗地理解，它就像是在一堆信息中找到最重要的部分，把注意力集中在这些关键点上，从而更好地完成任务。以下是几个简单的比喻来帮助理解注意力机制： 2、寻找重点：想象一下，你在阅读一篇文章的时候，有些段落特别重要，你会特别注意这些段落，反复阅读，而对其他部分
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2