JavaScript中JSON对象属性与URL参数之间相互转换实现

JavaScript中JSON对象属性与URL参数之间相互转换实现

文章目录

1. JSON对象转换为URL参数字符串

1. URLSearchParams

URLSearchParams: 详细文档 URLSearchParams接口参考

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。

一个实现了 URLSearchParams 的对象可以直接用在 for...of 结构中,以键/值对在查询字符串中出现的顺序对它们进行迭代,例如下面两行是等价的:

JSCopy to Clipboard

js 复制代码
for (const [key, value] of mySearchParams) {
}
for (const [key, value] of mySearchParams.entries()) {
}

具体转换案例如下

js 复制代码
<script>
   //obj对象
    const obj = {
        page: 1,
        size: 10,
        sort: 'id',
        order: 'desc',
        other: null
    };
   //方式1:

   let urlParams = new URLSearchParams(obj).toString()

   console.log(urlParams)
   //输出如下:
   //page=1&size=10&sort=id&order=desc&other=null
</script>

2. Object.keys

如下jsonToQueryString 函数将 JSON 对象转换为 URL 参数字符串。

  1. 遍历 JSON 对象的属性,编码键和值;
  2. 然后拼接成形如 key1=value1&key2=value2 的格式。
js 复制代码
<script>
   function jsonToQueryString(json) {
       return Object.keys(json)
           .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(json[key]))
           .join('&');
   }

   // 示例
   const json = { name: 'zhangSan', age: 30, city: 'beijing' };
   const queryString = jsonToQueryString(json);
   console.log(queryString);
   //输出如下
   // name=zhangSan&age=30&city=beijing
</script>

2. URL参数字符串转换为JSON对象:

如下queryStringToJson 函数将 URL 参数字符串转换为 JSON 对象。

  1. 首先对 URL 参数字符串做处理;
  2. 然后使用 JSON.parse() 方法将其转换为 JSON 对象。
js 复制代码
<script>
   function queryStringToJson(queryString) {
   return JSON.parse('{"' + decodeURI(queryString).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');
   }

   // 示例
   const queryStr = "name=zhangSan&age=30&city=beijing";
   const queryStrToJson = queryStringToJson(queryStr);
   console.log(queryStrToJson);
   //输出如下
   /*{
       "name": "zhangSan",
       "age": "30",
       "city": "beijing"
   }*/
</script>
     "name": "zhangSan",
       "age": "30",
       "city": "beijing"
   }*/
</script>
相关推荐
开航母的李大12 分钟前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu13 分钟前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
远方160917 分钟前
18-Oracle 23ai JSON二元性颠覆传统
数据库·oracle·json
鱼樱前端40 分钟前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
coding随想1 小时前
JavaScript中的原始值包装类型:让基本类型也能“变身”对象
开发语言·javascript·ecmascript
zhangxingchao1 小时前
Flutter入门:Flutter开发必备Dart基础
前端
佚名猫1 小时前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
满分观测网友z1 小时前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js
BillKu1 小时前
Vue3 + TypeSrcipt 防抖、防止重复点击实例
前端·javascript·vue.js