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