蓝桥杯 web 分享点滴（reduce方法）_分享点滴web蓝桥杯-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_84348511/article/details/146572799

答案

function appendParamsToURL(url, params) {
  return Object.entries(params).reduce((acc, [k, v]) => 
    acc.includes('?') ? `${acc}&${k}=${v}` : `${acc}?${k}=${v}`, url);
}

关键步骤分解

Object.entries(params)
将 params 对象转换为一个由键值对组成的数组。
- 示例：
```
const params = { a: 1, b: 2 };
Object.entries(params); // → [ ["a", "1"], ["b", "2"] ]
```
- 这样做是为了方便遍历每个键值对。
reduce() 方法
使用 reduce() 遍历 Object.entries(params) 转换后的数组，并逐步构建最终的 URL 字符串。
- reduce() 的第一个参数是一个回调函数，用于处理每次迭代的结果。
- 第二个参数是初始值，在这里初始值是 url（即基础 URL）。
- ```
//reduce 的写法
arrays.reduce(（acc，cur，idx）=>{}，[])
```
回调函数逻辑
回调函数接收两个参数：
- acc：累积值，初始值为 url，表示当前已经构造的 URL。
- [k, v]：当前迭代的键值对（例如 ["a", "1"] 中的 k = "a"，v = "1"）。
回调函数的逻辑如下：
```
acc.includes('?') ? `${acc}&${k}=${v}` : `${acc}?${k}=${v}`
```
- acc.includes('?')：检查当前累积的 URL 是否已经包含问号（?）。
  - 如果 acc 包含 ?，说明已经有查询参数，因此用 & 连接新的键值对。
  - 如果 acc 不包含 ?，说明这是第一个查询参数，用 ? 开始查询参数。
返回结果
每次迭代后，reduce() 会更新累积值 acc，直到遍历完所有键值对，最终返回完整的 URL。

实现方法

Object.entries()：将对象转换为键值对数组，方便遍历。
reduce()：逐步累积结果，适合这种需要从初始值开始逐步构建字符串的场景。
三元运算符：简化条件判断逻辑。
需要将 params 对象中的键值对转换为 URL 查询参数的形式（key=value）。
查询参数之间需要用 & 连接。
如果 URL 已经包含查询参数（即包含 ?），新参数需要用 & 追加；否则，用 ? 开始查询参数。

相关知识补充：
Object.entries(params) 的作用

什么是 Object.entries()？

Object.entries() 是 JavaScript 中的一个内置方法，用于将对象的键值对转换为一个二维数组。每个键值对会被表示为 [key, value] 的形式。

为什么用它？

在代码中，我们需要遍历 params 对象中的所有键值对（例如 { a: 1, b: 2 }），并将它们逐一拼接到 URL 中。为了实现这一点，我们需要一种方法来获取对象的所有键和对应的值。

Object.entries() 就是为此设计的工具。它会将对象转换成一个数组，数组中的每个元素是一个包含键和值的子数组。

如何结合 reduce() 使用？

reduce() 是一个数组方法，用于逐步累积结果。在这里，我们将 Object.entries(params) 转换后的数组传递给 reduce()，以便逐个处理每个键值对，并将其拼接到 URL 中。
反引号（模板字符串）
- 在 JavaScript 中，反引号（`）用于定义模板字符串（Template Literals）它是一种更简洁、更易读的字符串书写方式。
- 支持嵌入变量或表达式（${}），避免手动拼接字符串。
- 示例：?${key}=${value} 等价于 "?" + key + "=" + value。
  
  主要考查了以下知识点：
- 对象操作：Object.entries() 提取键值对。
- 数组操作：reduce() 实现累积拼接。
- 字符串操作：模板字符串、includes() 方法。
- 条件判断：三元运算符。
- 函数式编程：通过高阶函数实现简洁逻辑。
- URL 构建：理解查询参数的结构和拼接规则。