Object.keys() 模仿 qs.stringify()

本文介绍了一种使用JavaScript内置方法Object.keys来模仿qs.stringify功能的方法,并在此基础上增加了参数排序的功能。通过简单的代码实现,可以将对象转换为URL查询字符串格式,同时确保参数按字母顺序排列。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

#Object.keys() 模仿 qs.stringify()并加入排序

在这里插入代码片
import qs from 'qs'

let params = {
  name: 'zs',
  age: '18'
}

// {name: "zs", age: "18"}
console.log(qs.parse(params))  

// name=zs&age=18
console.log(qs.stringify(params))

// ["name=zs", "age=18"]
console.log(Object.keys(params).map(key => key + '=' + params[key]))

// name=zs&age=18
console.log(Object.keys(params).map(key => key + '=' + params[key]).join('&'))

// 加入sort排序 age=18&name=zs
console.log(Object.keys(params).sort().map(key => key + '=' + params[key]).join('&'))
// utils/navigation.js 使/** * 路由跳转公共方法封装 * 功能:统一路由管理、参数处理、错误拦截、扩展功能 */ // 路由配置白名单(无需登录可访问的页面) const whiteList = ['/pages/login/login', '/pages/index/index']; // 全局前置守卫钩子(可选) let beforeEach = (to, from, next) => { next() }; // 设置前置守卫 export const setBeforeEach = (fn) => { beforeEach = fn; }; /** * 处理跳转参数 * @param {string} url * @param {Object} params * @returns {string} */ function handleParams(url, params = {}) { if (!params || Object.keys(params).length === 0) return url; const query = Object.keys(params) .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`) .join('&'); return url.includes('?') ? `${url}&${query}` : `${url}?${query}`; } /** * 统一跳转方法 * @param {Object} options * @param {Function} method */ async function navigate(options, method) { try { const fullUrl = handleParams(options.url, options.params); // 执行全局前置守卫 await beforeEach({ url: fullUrl, type: method.name }, getCurrentPageUrl(), (next) => { if (next === false) return; }); method({ url: fullUrl, success: (res) => { options.success && options.success(res); }, fail: (err) => { console.error(`[路由错误] ${method.name} 跳转失败:`, err); options.fail && options.fail(err); }, complete: options.complete }); } catch (error) { console.error('[路由异常]', error); } } // 获取当前页面路径 function getCurrentPageUrl() { const pages = getCurrentPages(); return pages[pages.length - 1]?.route || ''; } // 封装导航方法 export const nav = { /** * 保留当前页面跳转 * @param {Object} options {url, params, success, fail, complete} */ navigateTo(options) { navigate(options, uni.navigateTo); }, /** * 关闭当前页面跳转 * @param {Object} options */ redirectTo(options) { navigate(options, uni.redirectTo); }, /** * 关闭所有页面跳转 * @param {Object} options */ reLaunch(options) { navigate(options, uni.reLaunch); }, /** *
03-30
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值