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

在前端开发中,我们经常需要将一个对象转换成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中的正确性。

posted @   王铁柱6  阅读(61)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
点击右上角即可分享
微信分享提示