将数组转换为对象、过滤数据和聚合值：使用更高阶函数

2024-10-16

JavaScript 是一种广泛用于前端开发的语言，因其灵活性和易于使用而受到青睐。对于开发人员来说，对 JavaScript 基础的理解非常重要，特别是在变量、函数和更高阶函数（如 map、filter 和 reduce）等方面。

一个场景是需要从后端获取数据并将其显示在网页上。前端开发者必须能够编写清晰高效的代码，并且能够快速有效地处理大量数据。 以一个示例来说明这一点：假设我们有一个用户信息对象的数组，每个对象都包含他们的姓名、年龄和城市。我们想要创建一个函数，该函数会将此数组中的对象转换为新的数组，其中每个对象的名称是用户的第一和最后一个名字（连接起来），并将一个新的名为“City”的城市属性添加到该对象中。这是使用更高阶函数（如 map、filter 和 reduce）时的一个优秀用例。

在这个场景下，我们将定义一个接收原始对象数组作为输入并返回被转换了的新数组的函数。第一个参数是原始数组，第二个参数是一个回调函数，它定义了对数组中的每个元素应该如何处理。

const users = [
  { name: 'John Doe', age: 32, city: 'New York' },
  { name: 'Jane Smith', age: 45, city: 'Los Angeles' },
];

function transformUsers(users) {
  return users.map((user) => {
    const firstAndLastName = user.name.split(' ').join('');
    return {
      ...user,
      firstName: firstAndLastName,
      lastName: user.name.split(' ')[1],
      city: "City",
    };
  });
}

const transformedUsers = transformUsers(users);

接下来，我们将解释这个代码。首先，map() 方法被调用在原始用户数组上。该方法对数组中的每个元素应用一个回调函数。 在这个例子中，回调函数将合并每个用户的姓名和最后名字并创建一个新的名为“City”的城市属性。使用扩展运算符（...）传递原对象的所有属性到新对象中。然后我们返回这个转换后的数组。 现在让我们看看 map() 在行动时的效果：

console.log(transformUsers(users));

我们可以预期的输出如下：[{firstName: 'John', lastName: 'Doe', city: "City"}, {firstName: 'Jane', lastName: 'Smith', city: "City"}]。约翰·杜尔和简·史密斯的姓名已经合并成一个字符串，并添加了一个名为“城市”的新属性，其中包含“城市”。 现在让我们看看如何使用 filter() 来过滤数组： 假设你想要从原始数组中移除所有年龄超过 40 岁的用户。我们可以使用 filter() 方法来处理这一点。

const filteredUsers = transformUsers(users).filter((user) => user.age <= 40);
console.log(filteredUsers);

我们期望的输出如下：[ { firstName: 'John Doe', lastName: 'Doe', city: "City" } ] 这个代码使用 filter() 方法遍历我们的转换后的数组，并返回年龄小于或等于 40 的所有用户。 最后，让我们看看如何使用 reduce() 来聚合值。假设我们想要计算出除名外的所有名称的总字符数：

const userNames = transformUsers(users).map((user) => {
  return user.name.length;
});

let sum = userNames.reduce((total, count) => total + count);
console.log(sum); // 输出：27

这个代码使用 reduce() 方法对一个包含整数的数组进行迭代，并将它们相加。我们从总值中开始为零，然后通过将每个数字累加以不断更新总数。 所以这就是如何将这些更高阶函数（如 map、filter 和 reduce）结合起来执行更高级的数据转换。理解并应用这些技巧可以让开发人员创建更具威力且用户友好的前端代码。 当然，我可以用一个表格的方式来展示这个例子的逻辑和流程：

操作 示例代码 功能描述
使用 map() 进行转换 transformUsers(users) 将原始用户数组中的每个对象转换成新的，包含名字首尾相连接的名字和“City”城市属性的新数组。
使用 filter() 过滤数据 filteredUsers = transformUsers(users).filter((user) => user.age <= 40); 创建一个新数组，该数组只包含年龄不大于40岁的用户。
使用 reduce() 求和名称长度 sum = userNames.reduce((total, count) => total + count); 计算除名外所有名称的总字符数，并返回结果。

这个表格展示了如何使用不同的数组处理函数（map、filter 和 reduce）来改变原始数据，从而实现数据的转换和过滤。

Blog Post Image