ES8 特性实例：执行反转 (Reducing) Utilizat）-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2017（也被称为 ES8）已经成为现代 web 开发的标准之一，它引入了许多新的特性和功能，包括异步函数、共享内存和对象值对等等。作为前端工程师，了解 ES8 的特性可以帮助你更加高效地开发和维护现代的 web 应用程序。本文将重点介绍 ES8 中的一项特性：执行反转 (Reducing)，并提供实例和使用指南。

什么是执行反转 (Reducing)？

执行反转是一个常用的编程技术，用于将数据结构的元素转换为单个值。这种技术通常被称为“折叠”、“折叠”、“归纳”、“规约”或“摺叠”。在 JavaScript 中，可以使用 Array.reduce() 方法来实现执行反转。这个方法接受一个回调函数作为参数，该函数接受四个参数：累加器、当前元素、当前索引和整个数组。

let arr = [1, 2, 3, 4, 5];

let sum = arr.reduce(function(acc, curr, index, arr) {
  return acc + curr;
}, 0);

console.log(sum); // 15

上面的示例中，我们使用 Array.reduce() 方法来计算数组 arr 中所有元素的和。reduce 方法接受一个回调函数作为参数，其中第一个参数是 acc，表示累加器的值，它接受了一个初始值为 0。第二个参数 curr 表示当前处理的元素，第三个参数 index 表示当前元素的索引，第四个参数 arr 表示整个数组。

在每次迭代中，回调函数将累加器的值与当前元素相加，并且将求和作为下一次迭代的累加器值。当所有元素都被遍历后，reduce 方法将返回累加器的最终值（在本例中为 15）。

什么时候使用执行反转？

使用执行反转时，主要考虑的是将一组值归约为单个值，例如求和、平均值、最大值和最小值等。这在实际编码中是非常常见的场景。比如，在处理复杂数据集或处理数组或对象时，我们期望使用一行代码来完成复杂的操作（如求和、平均值、最大值和最小值等）。

让我们来看一个更复杂的示例，假设我们有一个包含员工信息的数组：

let employees = [
  { name: 'John', salary: 50000 },
  { name: 'Mary', salary: 60000 },
  { name: 'Bob', salary: 40000 },
  { name: 'Joe', salary: 70000 },
];

我们希望在这个数组中找到所有员工的工资之和。可以使用 reduce() 方法将数组归约为单个值：

let totalSalary = employees.reduce(function(acc, curr) {
  return acc + curr.salary;
}, 0);

console.log(totalSalary); // 220000

在这个示例中，我们传递了一个回调函数给 reduce() 方法，其对数组进行归约操作。为了找到所有员工的薪资总额，我们将回调函数中的累加器 acc 初始化为 0，并将每个员工的工资与累加器相加。

执行反转的实际应用

除了上面提到的一些常见的场景，在实际应用中，可以通过执行反转来简化或提高代码质量。例如：

使用`reduce()`执行复杂映射操作

在 JavaScript 中，映射(Mapping)操作是很常见的。假设我们有一个包含员工信息的数组，我们需要将每个员工的工资乘以 0.9 来计算他们的税后收入。这可以通过使用 reduce() 方法和箭头函数来实现：

-- -------------------- ---- -------
--- --------- - -
  - ----- ------- ------- ----- --
  - ----- ------- ------- ----- --
  - ----- ------ ------- ----- --
  - ----- ------ ------- ----- --
--

--- -------------- - -----------------
  ----- ----- -- -
    -------------- - ----------- - ----
    ------ ----
  --
  --
--

----------------------------
-- ------ ------ ----- ------ ---- ------ ---- ------

将 reduce() 用于映射操作的优点是它简化了你的代码，将整个操作放在了一个单一的函数中。这样做可以排除代码中的垃圾，并将复杂性分散到归约函数中。

使用`reduce()`执行数组的压缩

在某些情况下，我们可能需要将数组压缩为一个单一的值，以便于更好地进行处理和分析。例如，假设我们有一个包含成绩的数组，我们想知道这个班级的平均成绩。可以使用 reduce() 方法和箭头函数来实现：

-- -------------------- ---- -------
--- ------ - ---- --- --- --- ----

--- ------------ - --------------
  ----- ----- ------ ---- -- -
    --- -- -----
    -- ------ --- ---------- - -- -
      ------ --- - -----------
    - ---- -
      ------ ----
    -
  --
  -
--

-------------------- -------- -------------- -- ----

在上面的代码中，我们使用 reduce() 方法将 scores 数组压缩为单个值，计算数组中所有元素的总和，并将其除以数组的长度以得到平均值。

如何使用 ES8 的执行反转？

使用 ES8 的执行反转方法将使代码更加简洁、清晰，更易于理解。这是实现思维的有效方式，在执行反转中，我们可以简化和优化一些必须使用循环和条件语句的场景。考虑如何为问题建立归约框架，以便更好地利用 reduce() 方法。

// 获取选择按钮的值
let selected = [...document.querySelectorAll('.choices input')]
  .reduce((selected, input) => {
    if (input.checked) {
      selected.push(input.value);
    }
    return selected;
  }, []);

在上面的示例中，我们使用 reduce() 方法获取选中按钮的值，遍历选项列表，查找哪个元素被选中。通过返回空数组来初始化累加器。并对每个选项进行检查后添加到累加器中，当没有更多选项时返回最终结果。

结论

在本文中，我们介绍了执行反转 (Reducing) 的概念，并提供了实际的应用案例。通过使用 ES8 中的 Array.reduce() 方法，我们可以更轻松地将数据信息转换为单个值，简化代码和降低复杂性。这是一种十分实用和强大的技术，可以帮助我们提高编程效率和代码质量。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6752f9258bd460d3ad9a1e7e

ES8 特性实例：执行反转 (Reducing) Utilizat）