首页 > 其他分享 >写一个方法将对象转成用&拼接的请求参数

写一个方法将对象转成用&拼接的请求参数

时间:2024-12-20 09:42:15浏览次数:5  
标签:key obj 请求 value 拼接 键值 转成 encodeURIComponent 函数

在前端开发中,我们经常需要将一个对象转换成URL查询字符串,其中键和值使用等号(=)连接,而不同的键值对之间使用和号(&)连接。以下是一个JavaScript函数,用于实现这一转换:

function objectToQueryString(obj) {
    return Object.keys(obj).map(key => {
        const value = obj[key];
        // 如果值是数组,则将数组的每个元素都转换为键值对
        if (Array.isArray(value)) {
            return value.map(v => `${encodeURIComponent(key)}[]=${encodeURIComponent(v)}`).join('&');
        }
        // 如果值是对象,则递归调用此函数
        else if (typeof value === 'object' && value !== null) {
            return objectToQueryString(value).split('&').map(pair => `${encodeURIComponent(key)}[${pair.split('=')[0]}]=${pair.split('=')[1]}`).join('&');
        }
        // 其他情况,直接转换为键值对
        else {
            return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
        }
    }).join('&');
}

// 使用示例:
const obj = {
    name: '张三',
    age: 25,
    skills: ['JavaScript', 'HTML', 'CSS'],
    address: {
        city: '北京',
        street: '朝阳路'
    }
};

const queryString = objectToQueryString(obj);
console.log(queryString); // 输出:name=%E5%BC%A0%E4%B8%89&age=25&skills[]=JavaScript&skills[]=HTML&skills[]=CSS&address[city]=%E5%8C%97%E4%BA%AC&address[street]=%E6%9C%9D%E9%98%B3%E8%B7%AF

这个函数会遍历对象的每个属性,并根据属性的类型进行不同的处理。如果属性值是数组,它会将数组的每个元素都转换为键值对。如果属性值是另一个对象,它会递归调用此函数来处理该对象。对于其他类型的属性值,它会直接将其转换为键值对。最后,所有的键值对都会使用&符号连接起来,形成一个完整的查询字符串。

注意:这个函数使用了encodeURIComponent函数来确保键和值都是URL安全的。这是因为在URL中,某些字符(如空格、特殊符号等)可能需要进行转义才能正确传输。encodeURIComponent函数可以将这些字符转换为对应的转义序列,从而确保它们在URL中的正确性。

标签:key,obj,请求,value,拼接,键值,转成,encodeURIComponent,函数
From: https://www.cnblogs.com/ai888/p/18618466

相关文章

  • 【实用技巧】MD5 的重复请求应用以及性能测试
    1 前言大家可能都遇到幂等或者娇艳重复提交的问题,比如重复的JSON请求、文件上传相同的文件重复上传了两次等,当然了确实存在某种情况比如人家用户一会上传了一个文件隔了一会儿又上传一个同样的文件是合理的,我们要做的就是短时间内的重复提交。这个时候我们可以通过计算请求......
  • vue3使用axios请求接口,先报错301,然后报错404
    一、问题描述在开发项目需求的时候,碰到一个奇怪的错误,先报错301,然后报错404,如上图所示。但是项目的其他接口请求都是正常的。二、错误原因及解决方法接口url的末尾缺少斜杠/,加上就好了。原url:‘/userproject’现url:‘/userproject/’......
  • vue-axios响应请求拦截器
    importaxiosfrom"axios";//import{ElMessage}from'element-plus'import{BASE_URL,TIMEOUT}from"../config";constAxios=axios.create({ //后端url地址baseURL:BASE_URL,//设置超时时间timeout:TIMEOUT,//请求头类型/......
  • 基于Halcon的图像拼接技术
    图像拼接一般分为硬拼接与软件拼接,硬拼接相对简单,将多幅图像按照指定的方式直接组合在一起,形成一个大的图像。在Halcon中,可以使用tile_images或tile_images_offset等算子来实现硬拼接。这里先将硬拼接讲解。常规步骤:1、读取图像:使用read_image算子读取需要拼接的图像。......
  • 【ETCD】当客户端从follower节点发起写请求时候,ETCD集群是如何处理此次的写请求呢?
    当客户端从follower节点发起写请求时候,ETCD集群是如何处理此次的写请求呢?目录1.客户端发起请求2.Follower节点转发请求3.转发给Leader节点4.Leader节点处理请求4.1写入预写日志(WAL)4.2发送复制请求5.Follower节点持久化数据6.Leader确认复制完成**7.Leader节......
  • servlet的请求转发和响应重定向
    文章目录1.简介2.请求转发2.1forword的请求转发2.2include的请求转发2.3其他3.响应重定向4.区别5.总结1.简介请求转发(RequestForwarding):请求转发是指服务器端将请求从一个Servlet转发到另一个Servlet、JSP页面或HTML页面,整个过程在服务器内部进行,对......
  • JS中把其它类型转成字符串的方法及规则是什么?
    在JavaScript中,有多种方法可以将其他类型转换为字符串。以下是一些常见的方法和规则:使用toString()方法:几乎所有的JavaScript对象都继承了toString()方法,该方法返回一个表示该对象的字符串。对于原始类型(如Number和Boolean),此方法会返回原始值的文本表示形式。对于数组和对象,默......
  • JS中把其它类型转成数字的方法及规则是什么?
    在JavaScript中,可以使用多种方式将其他类型转换为数字。以下是一些常见的方法和规则:Number()函数:Number()函数可以用来将任何类型的数据转换为数字。其规则如下:如果参数是布尔值,true转换为1,false转换为0。如果参数是数字,则返回该数字(无转换)。如果参数是null,返回0......
  • JS中把其它类型转成布尔的方法及规则是什么?
    在JavaScript中,可以使用Boolean()函数将其他类型转换为布尔值。此外,JavaScript中的类型转换也遵循一定的自动转换规则,特别是在条件判断等场景中。使用Boolean()函数Boolean()函数可以将任何类型的值转换为布尔值。以下是一些示例:console.log(Boolean(1));//trueconsol......
  • 鸿蒙ArkWeb 跨域请求
    鸿蒙ArkWeb基础-跨域请求ArkWeb内核出于安全考虑,默认限制file协议和resource协议的跨域访问。这意味着,如果Web组件尝试加载来自不同域的file协议或resource协议资源,将会被拦截,从而导致资源无法加载。例如,假设您的Web组件部署在域A上,而您想要加载域B上的本地资源,如图片或脚本文......