js获取queryString(get方法)参数

最新推荐文章于 2023-11-15 11:32:17 发布

豆子前端

最新推荐文章于 2023-11-15 11:32:17 发布

阅读量623

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： url js javascript

本文链接：https://blog.youkuaiyun.com/qq_41996454/article/details/108771364

前端专栏收录该内容

177 篇文章

订阅专栏

本文介绍了如何使用JavaScript的split和reduce方法解析URL查询字符串，将参数转换为键值对数组。示例代码展示了从URL中提取并解析'id'和'image'参数的过程。

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

思路

就是使用split+reduce组合，关于reduce方法，如果不熟，可以阅读我写的笔记。

《一文带你彻底搞懂js的Array.prototype.reduce()方法！》

实现

function getQueryArray(url) {
    let query = url.split("?").pop().split("&");
    let result = query.reduce(
        (total, cur) => {
            let tmpObj = {}
            let t = cur.split("=")
            tmpObj.name = t.shift()
            tmpObj.value = t.shift()
            total.push(tmpObj);
            return total
        },
        []
    )
    return (result)
}


let url = "http://www.runoob.com/index.php?id=1&image=awesome.jpg"
// let url = window.location.href  // 当前页url
console.log(getQueryArray(url))

输出

[ { name: 'id', value: '1' }, { name: 'image', value: 'awesome.jpg' } ]