现在我们有一个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';
又学到一些新东西,日拱一卒。