日常开发记录-Object函数的内置方法Object.entries

最新推荐文章于 2025-05-14 11:45:00 发布

原创最新推荐文章于 2025-05-14 11:45:00 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js #开发语言 #ecmascript

文章展示了两种使用JavaScript将对象转换为查询参数字符串的方法。第一种通过Object.entries遍历对象属性，第二种则封装成函数。两种方法都涉及到字符串拼接和属性键值对处理。

方法1：

const data = {
    id: 1,
    name: "张三",
    age: 22
}
let params = ""

/* Object.entries()方法返回一个数组，数组的每一个元素是对象的自有的可枚举属性的键值对，但不包括Symbol值的属性。
形如：[[key1, value1], [key2, value2], ... [keyn, valuen]] */ 
console.log(Object.entries(data)) // [ [ 'id', 1 ], [ 'name', '张三' ], [ 'age', 22 ] ]

for( const [key, value] of Object.entries(data)) {
    params += `${key}=${value}&`
}
if(params) {
    params = params.substring(0, params.length-1)
}
console.log(params) // id=1&name=张三&age=22

方法2：

const data = {
    id: 1,
    name: "张三",
    age: 22
}
function getParams(obj = {}) {
    let temp = Object.entries(obj)
    let params = ""

    for( const [key, value] of temp) {
        params += `${params ? '&' : '?'}${key}=${value}`
        
    }
    return params

}
console.log(getParams(data)) // ?id=1&name=张三&age=22