蓝桥杯 web 分享点滴（reduce方法）

答案

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

---

关键步骤分解

1. Object.entries(params)
   将 params 对象转换为一个由键值对组成的数组。

   • 示例：

     const params = { a: 1, b: 2 };
     Object.entries(params); // → [ ["a", "1"], ["b", "2"] ]

   • 这样做是为了方便遍历每个键值对。

2. reduce() 方法
   使用 reduce() 遍历 Object.entries(params) 转换后的数组，并逐步构建最终的 URL 字符串。

   • reduce() 的第一个参数是一个回调函数，用于处理每次迭代的结果。
   • 第二个参数是初始值，在这里初始值是 url（即基础 URL）。

   • //reduce 的写法
     arrays.reduce(（acc，cur，idx）=>{}，[])
     

3. 回调函数逻辑
   回调函数接收两个参数：

   • acc：累积值，初始值为 url，表示当前已经构造的 URL。
   • [k, v]：当前迭代的键值对（例如 ["a", "1"] 中的 k = "a"，v = "1"）。

   回调函数的逻辑如下：

   acc.includes('?') ? `${acc}&${k}=${v}` : `${acc}?${k}=${v}`

   • acc.includes('?')：检查当前累积的 URL 是否已经包含问号（?）。
     • 如果 acc 包含 ?，说明已经有查询参数，因此用 & 连接新的键值对。
     • 如果 acc 不包含 ?，说明这是第一个查询参数，用 ? 开始查询参数。

4. 返回结果
   每次迭代后，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 构建：理解查询参数的结构和拼接规则。

    ---

相关类似的题目

• 寻找小狼人（reduce,三元运算符，函数式编程）