当前位置:首页 > 未命名 > 正文

Javascript拼接get请求url

现在我们有一个obj

obj = { url: 'https://example.com/api?' };

还有一个data 是一个普通 JavaScript 对象(键值对),例如:

data = { name: 'Alice', age: 25, city: 'New York' };

代码逐步拆解

1. Object.keys(data)

Object.keys(data) 会返回一个数组,包含 data 对象所有的 可枚举的属性名(即键名)

对于上面的例子 data = { name: 'Alice', age: 25, city: 'New York' }

Object.keys(data)
// 返回:['name', 'age', 'city']

2. .map(key => key + '=' + data[key])

这是对上一步得到的键名数组进行 映射(map)操作,也就是遍历每个键名,并为每个键生成一个新的字符串。

具体来说,对于每一个 key(比如 'name''age''city'),它执行:

key + '=' + data[key]

意思是:键名 + 等号 + 该键对应的值

所以:

  • 当 key = 'name',则 data[key] = 'Alice' → 'name=Alice'

  • 当 key = 'age',则 data[key] = 25 → 'age=25'

  • 当 key = 'city',则 data[key] = 'New York' → 'city=New York'

最终,

Object.keys(data).map(...) 的结果是:

['name=Alice', 'age=25', 'city=New York']

3. .join('&')

接下来,对这个字符串数组调用 .join('&'),就是把数组中的所有元素用 & 符号拼接成一个完整的字符串。

所以上面的数组:

'name=Alice&age=25&city=New York'

这其实就是 URL 查询参数的格式

4. obj.url += ...

最后,这一整个生成的查询字符串,通过 += 拼接到 obj.url 的后面。

假设一开始:

obj.url = 'https://example.com/api?';

那么执行完这行代码后:

obj.url = 'https://example.com/api?name=Alice&age=25&city=New York';


又学到一些新东西,日拱一卒。

更新时间 2025-08-29